/* Knowledge base page (knowledge.php). Built on the shared layout tokens (assets/layout/layout.css), so light and
   dark follow the theme switch. Three columns on wide screens: article list | article | on-this-page; the contents
   column folds into the article under 1180px; under 860px the list becomes a drawer opened from the bar on top. */

.kb {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 196px;
    gap: 44px;
    max-width: 1320px;
    margin: 0 auto;
    align-items: start;
}

/* ---------- buttons ---------- */
.kb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px;
    border: 1px solid var(--line2); border-radius: 7px; background: var(--bg); color: var(--ink);
    font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease), transform var(--mo-fast) var(--mo-ease);
}
.kb-btn:hover { background: var(--hover); text-decoration: none; }
.kb-btn:active { transform: translateY(1px); }
.kb-btn .lay-i { width: 14px; height: 14px; }
.kb-btn-pri { background: var(--pri); color: var(--pri-ink); border-color: var(--pri); }
.kb-btn-pri:hover { background: color-mix(in srgb, var(--pri) 86%, var(--bg)); }
.kb-btn-ghost { border-color: transparent; background: none; color: var(--dim); }
.kb-sp { flex: 1; }

/* ---------- language switch ---------- */
.kb-lang { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line2); border-radius: 8px; background: var(--sub); flex: none; }
.kb-lang-opt {
    min-width: 34px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--dim);
}
.kb-lang-opt:hover { color: var(--ink); text-decoration: none; background: var(--hover); }
.kb-lang-opt.on { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line2), 0 1px 2px rgba(0, 0, 0, .06); }

/* ---------- left column: search + article list ---------- */
.kb-mbar { display: none; }
.kb-nav {
    position: sticky; top: calc(var(--bar-h) + 20px);
    max-height: calc(100vh - var(--bar-h) - 40px);
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.kb-nav-head { display: flex; align-items: center; gap: 8px; }
.kb-nav-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); }
.kb-nav-title:hover { text-decoration: none; color: var(--accent); }
.kb-nav-title .lay-i { color: var(--accent); }
.kb-nav-close { display: none; }

.kb-search {
    position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px;
    border: 1px solid var(--line2); border-radius: 8px; background: var(--bg); color: var(--faint);
    transition: border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease);
}
.kb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.kb .kb-search-in {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none;
    background: none; color: var(--ink); font: inherit; font-size: 13.5px;
}
.kb .kb-search-in:focus { box-shadow: none; border: 0; }
.kb-search-in::placeholder { color: var(--faint); }

.kb-results {
    display: grid; gap: 2px; padding: 4px; max-height: min(420px, 55vh); overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); box-shadow: var(--shadow);
}
.kb-res {
    display: grid; gap: 2px; padding: 8px 10px; border-radius: 7px; color: var(--dim); cursor: pointer; text-decoration: none;
}
.kb-res:hover { text-decoration: none; background: var(--hover); }
.kb-res.on { background: var(--sel); }
.kb-res b { color: var(--ink); font-weight: 500; font-size: 13px; }
.kb-res small { font-size: 11.5px; color: var(--faint); }
.kb-res-snip { font-size: 12px; line-height: 1.45; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-res mark { background: var(--accent-bg); color: var(--accent); border-radius: 3px; padding: 0 1px; }
.kb-res-empty { padding: 14px 10px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }

.kb-tree { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 16px; align-content: start; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: thin; }
.kb-tree-grp { display: grid; gap: 1px; }
.kb-tree-grp h6 { margin: 0 0 4px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.kb-tree-item {
    position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px;
    color: var(--dim); min-width: 0;
    transition: background var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease);
}
.kb-tree-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-tree-item .lay-i { width: 15px; height: 15px; color: var(--faint); }
.kb-tree-item:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.kb-tree-item.on { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.kb-tree-item.on .lay-i { color: var(--accent); }

/* ---------- article ---------- */
.kb-article { min-width: 0; max-width: 780px; }

.kb-hero {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start;
    padding: 24px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--sub), var(--bg));
}
.kb-hero-ic {
    width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
    background: var(--bg); color: var(--accent); border: 1px solid var(--line2); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.kb-hero-ic .lay-i { width: 22px; height: 22px; stroke-width: 1.4; }
.kb-hero-main { min-width: 0; }
.kb-eyebrow { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.kb-hero h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.kb-lede { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--dim); max-width: 62ch; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.kb-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
    border: 1px solid var(--line2); background: var(--bg); font-size: 12px; color: var(--dim);
}
.kb-chip .lay-i { width: 12px; height: 12px; }
.kb-chip-lock { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-bg); }
.kb-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.kb-runs-server { background: var(--accent); }
.kb-runs-browser { background: var(--ok); }
.kb-runs-mixed { background: var(--k); }
.kb-hero-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.kb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kb-fact { padding: 14px 16px; border-left: 1px solid var(--line); min-width: 0; }
.kb-fact:first-child { border-left: 0; }
.kb-fact dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.kb-fact dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.kb-fact-good dt { color: var(--ok); }

.kb-toc-m { display: none; }

.kb-body { margin-top: 8px; }
.kb-sec { padding-top: 28px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.kb-sec h2, .kb-related h2 {
    position: relative; margin: 0 0 10px; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.kb-h-anchor {
    position: absolute; left: -22px; top: 0; width: 18px; text-align: center; color: var(--faint); font-weight: 400;
    opacity: 0; transition: opacity var(--mo-fast) var(--mo-ease);
}
.kb-sec h2:hover .kb-h-anchor, .kb-h-anchor:focus-visible { opacity: 1; text-decoration: none; }
.kb-sec p, .kb-sec li, .kb-sec dd { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.kb-sec p { margin: 0 0 12px; max-width: 72ch; }
.kb-sec ul, .kb-sec ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 4px; max-width: 72ch; }
.kb-sec li::marker { color: var(--faint); }
.kb-sec ol li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }
.kb-sec strong { font-weight: 600; }
.kb-article code {
    font-family: var(--f-mono); font-size: .86em; padding: 1px 5px; border-radius: 5px;
    background: var(--sub); border: 1px solid var(--line); color: var(--ink); overflow-wrap: break-word;
}
.kb-xref { font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.kb-xref:hover { text-decoration-color: var(--accent); }

.kb-code { margin: 4px 0 16px; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; background: var(--sub); }
.kb-code figcaption {
    display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 6px 0 12px;
    border-bottom: 1px solid var(--line); font-size: 12px; color: var(--faint);
}
.kb-code figcaption > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-copy {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 0; border-radius: 6px;
    background: none; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer;
    transition: background var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease);
}
.kb-copy:hover { background: var(--hover); color: var(--ink); }
.kb-copy .lay-i { width: 13px; height: 13px; }
.kb-copy.is-done { color: var(--ok); }
.kb-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; background: var(--bg); }
.kb-code pre code { padding: 0; border: 0; background: none; font-size: 12.5px; line-height: 1.65; white-space: pre; overflow-wrap: normal; }

.kb-note {
    display: flex; gap: 10px; margin: 4px 0 16px; padding: 12px 14px; border-radius: 10px;
    background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.kb-note p { margin: 0 !important; font-size: 13.5px !important; }
.kb-note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 8px; }
.kb-note-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.kb-note-warn .kb-note-dot { background: var(--warn); }
.kb-note-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.kb-note-ok .kb-note-dot { background: var(--ok); }

.kb-table-wrap { margin: 4px 0 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.kb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kb-table th, .kb-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.5; }
.kb-table thead th { border-top: 0; background: var(--sub); font-size: 11.5px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.kb-table td { color: var(--ink); }
.kb-table tbody tr:hover td { background: color-mix(in srgb, var(--hover) 60%, transparent); }

.kb-dl { margin: 4px 0 16px; display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.kb-dl > div { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr); gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); }
.kb-dl > div:first-child { border-top: 0; }
.kb-dl dt { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.kb-sec .kb-dl dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dim); }

/* cards: related tools and the home directory */
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.kb-card {
    display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink);
    transition: border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease);
}
.kb-card:hover { text-decoration: none; border-color: var(--line2); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transform: translateY(-1px); }
.kb-card-ic { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.kb-card-tx { display: grid; gap: 3px; min-width: 0; }
.kb-card-tx b { font-weight: 600; font-size: 13.5px; }
.kb-card-tx span { font-size: 12.5px; line-height: 1.5; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kb-dir { display: grid; gap: 22px; margin-top: 6px; }
.kb-dir-group h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }

.kb-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }

.kb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.kb-pager-a {
    display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); min-width: 0;
    transition: border-color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease);
}
.kb-pager-a:hover { text-decoration: none; border-color: var(--line2); background: var(--sub); }
.kb-pager-a span { font-size: 12px; color: var(--faint); }
.kb-pager-a b { font-weight: 600; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-prev span::before { content: "\2190\00a0"; }
.kb-next { text-align: right; grid-column: 2; }
.kb-next span::after { content: "\00a0\2192"; }

/* ---------- right column: on this page ---------- */
.kb-toc { position: sticky; top: calc(var(--bar-h) + 20px); font-size: 12.5px; }
.kb-toc-h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.kb-toc ol, .kb-toc-m ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.kb-toc a {
    display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); color: var(--dim); line-height: 1.4;
    transition: color var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}
.kb-toc a:hover { color: var(--ink); text-decoration: none; }
.kb-toc a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }

/* ---------- medium: contents fold into the article ---------- */
@media (max-width: 1180px) {
    .kb { grid-template-columns: 232px minmax(0, 1fr); gap: 36px; }
    .kb-toc { display: none; }
    .kb-toc-m { display: block; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 10px; }
    .kb-toc-m summary {
        display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; cursor: pointer;
        list-style: none; font-weight: 500; color: var(--ink);
    }
    .kb-toc-m summary::-webkit-details-marker { display: none; }
    .kb-toc-m summary .lay-i { color: var(--faint); transition: transform var(--mo-base) var(--mo-ease); }
    .kb-toc-m[open] summary .lay-i { transform: rotate(180deg); }
    .kb-toc-m ol { padding: 0 8px 8px; }
    .kb-toc-m a { display: block; padding: 6px 8px; border-radius: 6px; color: var(--dim); }
    .kb-toc-m a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
}

/* ---------- phone and narrow: the article list is a drawer ---------- */
@media (max-width: 860px) {
    .kb { display: block; }
    .kb-mbar {
        display: flex; align-items: center; gap: 6px; margin: -6px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
    }
    .kb-lang-side { display: none; }
    .kb-nav {
        position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; width: min(320px, 88vw); max-height: none;
        padding: 14px 12px; background: var(--bg); border-right: 1px solid var(--line2); box-shadow: none;
        transform: translateX(-104%); visibility: hidden;
        transition: transform var(--mo-base) var(--mo-ease-in), visibility 0s linear var(--mo-base);
    }
    body.kb-nav-open .kb-nav {
        transform: none; visibility: visible; box-shadow: var(--shadow);
        transition: transform var(--mo-slow) var(--mo-ease-out), visibility 0s;
    }
    .kb-nav-close { display: inline-grid; }
    .kb-search-kbd { display: none; }
    .kb-scrim { position: fixed; inset: 0; z-index: 99; background: var(--scrim); }
    body.kb-nav-open { overflow: hidden; }

    .kb-hero { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 14px; }
    .kb-hero-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .kb-hero-act .kb-btn { flex: 1 1 auto; }
    .kb-hero h1 { font-size: 23px; }
    .kb-lede { font-size: 14px; }
    .kb-facts { grid-template-columns: minmax(0, 1fr); }
    .kb-fact { border-left: 0; border-top: 1px solid var(--line); }
    .kb-fact:first-child { border-top: 0; }
    .kb-h-anchor { display: none; }
    .kb-sec p, .kb-sec li { font-size: 14px; }
    .kb-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .kb-pager { grid-template-columns: minmax(0, 1fr); }
    .kb-next { grid-column: auto; }
    .kb-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
    .kb-hero-ic { width: 36px; height: 36px; }
    .kb-hero-ic .lay-i { width: 18px; height: 18px; }
    .kb-mbar .kb-btn span { display: inline; }
}