/* Kompoz documentation site. Colors are Material 3's baseline scheme. */
:root {
    --primary: #6750a4;
    --on-primary: #ffffff;
    --primary-container: #eaddff;
    --on-primary-container: #21005d;
    --bg: #fdfbff;
    --surface: #ffffff;
    --surface-low: #f6f2fa;
    --surface-high: #ece6f0;
    --text: #1d1b20;
    --text-muted: #49454f;
    --outline: #cac4d0;
    --outline-strong: #79747e;
    --code-bg: #f6f2fa;
    --code-text: #1d1b20;
    --note: #e8f0fe;
    --note-edge: #1a73e8;
    --tip: #e6f4ea;
    --tip-edge: #188038;
    --warning: #fef7e0;
    --warning-edge: #e37400;
    --hl-kw: #8a3ffc;
    --hl-str: #0b7a3e;
    --hl-com: #6f6b75;
    --hl-num: #b5470b;
    --hl-fn: #1a5fb4;
    --hl-ty: #9c2a6b;
    --hl-call: #0e6b8a;
    --top-height: 60px;
    --side-width: 272px;
    --toc-width: 232px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #d0bcff;
        --on-primary: #381e72;
        --primary-container: #4f378b;
        --on-primary-container: #eaddff;
        --bg: #141218;
        --surface: #1d1b20;
        --surface-low: #1d1b20;
        --surface-high: #2b2930;
        --text: #e6e0e9;
        --text-muted: #cac4d0;
        --outline: #49454f;
        --outline-strong: #938f99;
        --code-bg: #1d1b20;
        --code-text: #e6e0e9;
        --note: #1b2a41;
        --note-edge: #8ab4f8;
        --tip: #17301f;
        --tip-edge: #81c995;
        --warning: #3a2a10;
        --warning-edge: #fdd663;
        --hl-kw: #d0a8ff;
        --hl-str: #8fd8a8;
        --hl-com: #948f9c;
        --hl-num: #ffb68a;
        --hl-fn: #8ab4f8;
        --hl-ty: #f4a6cf;
        --hl-call: #7fd3ec;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --primary: #d0bcff;
    --on-primary: #381e72;
    --primary-container: #4f378b;
    --on-primary-container: #eaddff;
    --bg: #141218;
    --surface: #1d1b20;
    --surface-low: #1d1b20;
    --surface-high: #2b2930;
    --text: #e6e0e9;
    --text-muted: #cac4d0;
    --outline: #49454f;
    --outline-strong: #938f99;
    --code-bg: #1d1b20;
    --code-text: #e6e0e9;
    --note: #1b2a41;
    --note-edge: #8ab4f8;
    --tip: #17301f;
    --tip-edge: #81c995;
    --warning: #3a2a10;
    --warning-edge: #fdd663;
    --hl-kw: #d0a8ff;
    --hl-str: #8fd8a8;
    --hl-com: #948f9c;
    --hl-num: #ffb68a;
    --hl-fn: #8ab4f8;
    --hl-ty: #f4a6cf;
    --hl-call: #7fd3ec;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--top-height) + 16px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd {
    font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- Top bar ---- */

.top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--top-height);
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--outline);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.logo { width: 30px; height: 30px; }

.version {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-high);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.search {
    position: relative;
    flex: 1;
    max-width: 520px;
    margin-left: auto;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface-high);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    outline: none;
}
.search input:focus { border-color: var(--primary); background: var(--surface); }
.search input::-webkit-search-cancel-button { display: none; }

.search kbd {
    position: absolute;
    top: 9px;
    right: 12px;
    padding: 0 6px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 20px;
}
.search input:focus + kbd { display: none; }

.results {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    display: none;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--outline);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.results.open { display: block; }
.results a {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--text);
}
.results a:hover, .results a.active { background: var(--primary-container); color: var(--on-primary-container); text-decoration: none; }
.results .where { display: block; font-size: 12px; color: var(--text-muted); }
.results a.active .where, .results a:hover .where { color: inherit; opacity: 0.8; }
.results .what { display: block; font-weight: 500; }
.results .snippet { display: block; font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results mark { background: none; color: var(--primary); font-weight: 600; }
.results .empty { padding: 12px; color: var(--text-muted); }

.language, .theme-button, .menu-button {
    flex: none;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.language { display: flex; align-items: center; padding: 0 14px; }
.language:hover, .theme-button:hover, .menu-button:hover { background: var(--surface-high); text-decoration: none; }

.theme-button { width: 40px; position: relative; }
.theme-button::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.menu-button { display: none; width: 40px; position: relative; }
.menu-button span, .menu-button span::before, .menu-button span::after {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 2px;
    background: currentColor;
    content: "";
}
.menu-button span { top: 19px; }
.menu-button span::before { left: 0; top: -6px; }
.menu-button span::after { left: 0; top: 6px; }

/* ---- Layout ---- */

.layout {
    display: grid;
    grid-template-columns: var(--side-width) minmax(0, 1fr) var(--toc-width);
    max-width: 1440px;
    margin: 0 auto;
}

.side {
    position: sticky;
    top: var(--top-height);
    height: calc(100vh - var(--top-height));
    overflow-y: auto;
    padding: 20px 12px 40px;
    border-right: 1px solid var(--outline);
}

.side details { margin-bottom: 6px; }
.side summary {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.side summary::-webkit-details-marker { display: none; }
.side summary::after { content: "▾"; float: right; color: var(--text-muted); transition: transform 0.15s; }
.side details:not([open]) summary::after { transform: rotate(-90deg); }
.side a {
    display: block;
    padding: 6px 12px 6px 20px;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.4;
}
.side a:hover { background: var(--surface-high); color: var(--text); text-decoration: none; }
.side a.current { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }

main { min-width: 0; padding: 28px 48px 48px; }

.crumbs { color: var(--text-muted); font-size: 14px; margin-bottom: 4px; min-height: 22px; }

article { max-width: 820px; }

article h1 {
    margin: 0 0 20px;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.02em;
}
article h2 {
    margin: 48px 0 12px;
    padding-top: 8px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.01em;
}
article h3 { margin: 32px 0 8px; font-size: 21px; font-weight: 500; line-height: 1.35; }
article h4 { margin: 24px 0 8px; font-size: 17px; font-weight: 600; }
article h2, article h3, article h4 { position: relative; }
.anchor {
    position: absolute;
    left: -24px;
    padding-right: 6px;
    color: var(--outline-strong);
    font-weight: 400;
    opacity: 0;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; text-decoration: none; }

article p, article li { color: var(--text); }
article p { margin: 0 0 16px; }
article ul, article ol { margin: 0 0 16px; padding-left: 26px; }
article li { margin: 4px 0; }
article li > ul, article li > ol { margin: 4px 0; }

article :not(pre) > code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface-high);
    color: var(--text);
    font-size: 0.88em;
    overflow-wrap: anywhere;
}
article a code { color: var(--primary); }

article img { max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--outline); }
article figure { margin: 24px 0; text-align: center; }
article figure img { max-height: 520px; width: auto; }
article figure.row { display: flex; gap: 12px; align-items: flex-start; }
article figure.row img { flex: 1; min-width: 0; width: 100%; max-height: none; }
@media (max-width: 640px) { article figure.row { flex-direction: column; } }

/* ---- Code ---- */

.code {
    position: relative;
    margin: 0 0 20px;
    border: 1px solid var(--outline);
    border-radius: 14px;
    background: var(--code-bg);
}
.code::before {
    content: attr(data-lang);
    position: absolute;
    top: 8px;
    right: 48px;
    color: var(--text-muted);
    font-size: 12px;
    opacity: 0.8;
}
.code pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    color: var(--code-text);
    font-size: 13.5px;
    line-height: 1.6;
    tab-size: 4;
}
.copy {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.code:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { background: var(--surface-high); }
.copy::before, .copy::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 13px;
    border: 1.6px solid currentColor;
    border-radius: 3px;
}
.copy::before { left: 8px; top: 7px; }
.copy::after { left: 12px; top: 11px; background: var(--code-bg); }
.copy.done::before { content: "✓"; border: 0; left: 10px; top: 5px; font-size: 15px; width: auto; height: auto; }
.copy.done::after { display: none; }

.kw { color: var(--hl-kw); }
.str { color: var(--hl-str); }
.com { color: var(--hl-com); font-style: italic; }
.num { color: var(--hl-num); }
.fn { color: var(--hl-fn); }
.ty { color: var(--hl-ty); }
.call { color: var(--hl-call); }
.pre { color: var(--hl-kw); }
.var { color: var(--hl-num); }

/* ---- Tables, callouts ---- */

.table { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--outline); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--outline); }
tr:last-child td { border-bottom: 0; }
th { background: var(--surface-low); font-weight: 600; }
td:first-child { min-width: 180px; }

.callout {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 4px solid var(--outline-strong);
    border-radius: 4px 14px 14px 4px;
    background: var(--surface-low);
}
.callout > :last-child { margin-bottom: 0; }
.callout.note { background: var(--note); border-color: var(--note-edge); }
.callout.tip { background: var(--tip); border-color: var(--tip-edge); }
.callout.warning { background: var(--warning); border-color: var(--warning-edge); }

/* ---- Landing page ---- */

.page-index article > p:first-of-type { font-size: 19px; color: var(--text-muted); }

/* ---- Pager, footer, table of contents ---- */

.pager { display: flex; gap: 16px; max-width: 820px; margin-top: 56px; }
.pager a {
    flex: 1;
    padding: 14px 18px;
    border: 1px solid var(--outline);
    border-radius: 16px;
    color: var(--text);
    font-weight: 500;
}
.pager a:hover { border-color: var(--primary); text-decoration: none; }
.pager span { display: block; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.pager .next { text-align: right; margin-left: auto; }

footer {
    max-width: 820px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--outline);
    color: var(--text-muted);
    font-size: 13px;
}

.toc {
    position: sticky;
    top: var(--top-height);
    height: calc(100vh - var(--top-height));
    overflow-y: auto;
    padding: 32px 20px 40px 8px;
    font-size: 13.5px;
}
.toc-title { margin-bottom: 8px; color: var(--text); font-weight: 600; }
.toc a {
    display: block;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--outline);
    color: var(--text-muted);
    line-height: 1.4;
}
.toc a.l3 { padding-left: 24px; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.active { border-color: var(--primary); color: var(--primary); }

.scrim { display: none; }

/* ---- Narrow windows ---- */

@media (max-width: 1180px) {
    .layout { grid-template-columns: var(--side-width) minmax(0, 1fr); }
    .toc { display: none; }
}

@media (max-width: 860px) {
    .layout { display: block; }
    .menu-button { display: block; }
    .side {
        position: fixed;
        top: var(--top-height);
        left: 0;
        z-index: 30;
        width: min(300px, 86vw);
        background: var(--surface);
        transform: translateX(-100%);
        transition: transform 0.2s;
    }
    body.menu-open .side { transform: none; }
    body.menu-open .scrim {
        display: block;
        position: fixed;
        inset: var(--top-height) 0 0 0;
        z-index: 25;
        background: rgba(0, 0, 0, 0.35);
    }
    main { padding: 20px 16px 40px; }
    article h1 { font-size: 32px; }
    article h2 { font-size: 24px; }
    .anchor { display: none; }
    .version, .search kbd { display: none; }
    .top { gap: 6px; padding: 0 8px; }
    .brand span { display: none; }
    .language { padding: 0 10px; }
    .pager { flex-direction: column; }
    .code pre { font-size: 12.5px; padding: 14px; }
}