/* Knowledge base (/wiki and /wiki/<slug>).
   Same reel palette and type as the landing, login and Hall of Fame pages:
   ink background, blue for actions and the current position, orange only for
   warnings. The one loud element is the trace rail: a vertical line with one
   node per category (index) or per heading (article). Nodes behind the reader
   fill in, the current one rings blue, the ones ahead stay hollow.
   Tokens live in static/css/reel-theme.css. */
:root {
    --wk-top: 6.75rem; /* sticky offset below the 5rem site header */
}
/* Anchor jumps land just below the sticky header (replaces public.css's 5rem) */
html { scroll-padding-top: var(--wk-top); }


/* ---------- Shared pieces ---------- */
.wk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .wk-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .wk-wrap { padding: 0 2rem; } }
.wk-display { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--lp-fg); letter-spacing: -0.025em; text-wrap: balance; }
.wk-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.wk-link { color: var(--lp-link); transition: color .2s; }
.wk-link:hover { color: var(--lp-link-2); }
.wk-link:focus-visible, .wk-btn:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 3px; border-radius: 6px; }

.wk-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .65rem; border-radius: 999px;
    font-size: .8125rem; color: var(--lp-soft); border: 1px solid var(--lp-line-2); white-space: nowrap;
}
/* Scanner finding code: mono, orange tick, since it names a failed check */
.wk-code {
    display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .6rem; border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; color: var(--lp-amber);
    background: rgba(255, 106, 26, .07); border: 1px solid rgba(255, 106, 26, .28); white-space: nowrap;
}

.wk-btn {
    display: inline-flex; align-items: center; gap: .6rem; border-radius: 10px; font-weight: 600;
    padding: .85rem 1.4rem; font-size: 1rem; background: var(--lp-blue); color: var(--lp-on-blue);
    transition: background-color .2s, transform .15s;
}
.wk-btn:hover { background: var(--lp-blue-2); }
.wk-btn:active { transform: translateY(1px) scale(.99); }

/* ---------- Trace rail (shared by both pages) ---------- */
.wk-rail { position: relative; }
.wk-rail__title { font-size: .8125rem; font-weight: 600; color: var(--lp-fg); margin: 0 0 .9rem; }
.wk-rail ol { list-style: none; margin: 0; padding: 0; }
/* the track, and its filled part up to the current node */
.wk-rail__track { position: relative; }
.wk-rail__track::before, .wk-rail__fill {
    content: ""; position: absolute; left: 5px; top: .7rem; width: 2px; border-radius: 2px;
}
.wk-rail__track::before { bottom: .7rem; background: var(--lp-line-2); }
.wk-rail__fill { height: 0; background: var(--lp-blue); pointer-events: none; }
.wk-rail--armed .wk-rail__fill { transition: height .35s cubic-bezier(.2, .7, .2, 1); }
.wk-rail li { position: relative; }
.wk-rail a {
    position: relative; display: block; padding: .38rem 0 .38rem 1.6rem; font-size: .875rem; line-height: 1.4;
    color: var(--lp-mute); transition: color .2s;
}
.wk-rail a::before {
    content: ""; position: absolute; left: 1px; top: .72rem; width: 10px; height: 10px; border-radius: 50%;
    background: var(--lp-ink); border: 2px solid var(--lp-line-2); box-sizing: border-box;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.wk-rail a:hover { color: var(--lp-fg); }
.wk-rail a:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 2px; border-radius: 6px; }
.wk-rail li.is-past > a::before { background: var(--lp-blue); border-color: var(--lp-blue); }
.wk-rail li.is-current > a { color: var(--lp-fg); font-weight: 600; }
.wk-rail li.is-current > a::before {
    background: var(--lp-ink); border-color: var(--lp-blue-2);
    box-shadow: 0 0 0 4px rgba(56, 169, 228, .18), 0 0 12px rgba(143, 214, 247, .55);
}
.wk-rail li.is-sub > a { padding-left: 2.5rem; font-size: .8125rem; }
.wk-rail li.is-sub > a::before { left: 3px; top: .74rem; width: 6px; height: 6px; border-width: 1.5px; }
.wk-rail__count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; color: var(--lp-dim); margin-left: .35rem; }

/* ---------- Index page ---------- */
.wk-hero { border-bottom: 1px solid var(--lp-line); padding: 3.5rem 0 3rem; }
@media (min-width: 1024px) { .wk-hero { padding: 5rem 0 4rem; } }
.wk-hero__grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) { .wk-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.wk-title { font-size: 2.75rem; font-weight: 700; line-height: 1; margin: 0 0 1.25rem; }
@media (min-width: 640px) { .wk-title { font-size: 3.5rem; } }
@media (min-width: 1280px) { .wk-title { font-size: 4.25rem; } }
.wk-lede { color: var(--lp-mute); font-size: 1.125rem; line-height: 1.6; max-width: 36rem; margin: 0; }

.wk-search { position: relative; }
.wk-search label { display: block; font-size: .875rem; color: var(--lp-mute); margin-bottom: .55rem; }
.wk-search__box { position: relative; }
.wk-search__box > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--lp-dim); font-size: .9rem; pointer-events: none; }
.wk-search input {
    width: 100%; background: var(--lp-ink-2); color: var(--lp-fg);
    border: 1px solid var(--lp-line-2); border-radius: 12px; padding: 1rem 3rem 1rem 2.75rem; font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.wk-search input::placeholder { color: var(--lp-dim); }
.wk-search input:focus { outline: none; border-color: var(--lp-blue); box-shadow: 0 0 0 3px var(--lp-focus-ring); }
.wk-search kbd {
    position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; color: var(--lp-mute);
    border: 1px solid var(--lp-line-2); border-radius: 5px; padding: .05rem .4rem; pointer-events: none;
}
.wk-search input:focus + kbd, .wk-search input:not(:placeholder-shown) + kbd { display: none; }
@media (hover: none) { .wk-search kbd { display: none; } }
.wk-search__status { font-size: .8125rem; color: var(--lp-dim); margin: .6rem 0 0; min-height: 1.2em; }

.wk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2.5rem 0 5rem; }
@media (min-width: 1024px) { .wk-body { grid-template-columns: 14.5rem minmax(0, 1fr); gap: 4rem; padding: 4rem 0 6rem; } }
.wk-body > aside { display: none; }
@media (min-width: 1024px) {
    .wk-body > aside { display: block; }
    .wk-body > aside .wk-rail { position: sticky; top: var(--wk-top); }
}

/* Small screens: categories as a scrollable row of chips instead of the rail */
.wk-jump { display: flex; gap: .5rem; overflow-x: auto; margin: 0 -1rem 2rem; padding: 0 1rem .25rem; scrollbar-width: none; }
.wk-jump::-webkit-scrollbar { display: none; }
.wk-jump a { flex: none; }
.wk-jump a[hidden] { display: none; }
.wk-jump a:hover { color: var(--lp-fg); border-color: var(--lp-blue); }
@media (min-width: 1024px) { .wk-jump { display: none; } }

.wk-group + .wk-group { margin-top: 3.5rem; }
.wk-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--lp-line); }
.wk-h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: 0; }
@media (min-width: 768px) { .wk-h2 { font-size: 1.875rem; } }
.wk-group__count { font-size: .8125rem; color: var(--lp-dim); white-space: nowrap; }

.wk-list { list-style: none; margin: 0; padding: 0; }
.wk-entry { border-bottom: 1px solid var(--lp-line); }
.wk-entry > a {
    display: grid; gap: .5rem 2rem; padding: 1.35rem .25rem; border-radius: 4px;
    transition: background-color .2s;
}
@media (min-width: 768px) { .wk-entry > a { grid-template-columns: minmax(0, 1fr) auto; padding: 1.5rem 1rem; } }
/* No meta column (related-articles list): keep a single column so the description does not take the second track */
@media (min-width: 768px) { .wk-entry--single > a { grid-template-columns: minmax(0, 1fr); } }
.wk-entry > a:hover { background: var(--lp-hover); }
.wk-entry > a:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: -2px; border-radius: 8px; }
.wk-entry h3 {
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; font-size: 1.1875rem; font-weight: 600;
    letter-spacing: -0.015em; color: var(--lp-fg); margin: 0; transition: color .2s;
}
.wk-entry > a:hover h3 { color: var(--lp-link-2); }
.wk-entry p {
    margin: 0; color: var(--lp-mute); font-size: .9375rem; line-height: 1.6; max-width: 46rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .8125rem; color: var(--lp-dim); }
@media (min-width: 768px) { .wk-entry__meta { grid-row: 1 / span 2; grid-column: 2; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding-top: .2rem; } }

.wk-empty { padding: 3rem 0; max-width: 32rem; }
.wk-empty h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; }
.wk-empty p { color: var(--lp-mute); margin: 0 0 1.25rem; line-height: 1.6; }
.wk-empty button { color: var(--lp-link); font-weight: 600; }
.wk-empty button:hover { color: var(--lp-link-2); }

/* Closing strip: one plain line and one action */
.wk-cta { border-top: 1px solid var(--lp-line); padding: 3.5rem 0; }
.wk-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.wk-cta h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .35rem; }
@media (min-width: 768px) { .wk-cta h2 { font-size: 1.875rem; } }
.wk-cta p { color: var(--lp-mute); margin: 0; }

/* ---------- Article page ---------- */
.wk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; color: var(--lp-dim); margin: 0 0 1.75rem; padding: 0; list-style: none; }
.wk-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--lp-line-2); }
.wk-crumbs a { color: var(--lp-mute); transition: color .2s; }
.wk-crumbs a:hover { color: var(--lp-fg); }

.wk-article-head { border-bottom: 1px solid var(--lp-line); padding: 2.5rem 0 2.5rem; }
@media (min-width: 1024px) { .wk-article-head { padding: 3.5rem 0 3.25rem; } }
.wk-article-head__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.wk-article-title { font-size: 2.25rem; font-weight: 700; line-height: 1.05; margin: 0; max-width: 56rem; }
@media (min-width: 640px) { .wk-article-title { font-size: 3rem; } }
@media (min-width: 1280px) { .wk-article-title { font-size: 3.5rem; } }
.wk-article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.5rem 0 0; font-size: .875rem; color: var(--lp-dim); }
.wk-article-meta dt { display: inline; }
.wk-article-meta dd { display: inline; margin: 0 0 0 .35rem; color: var(--lp-soft); }

.wk-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2.5rem 0 4rem; }
@media (min-width: 1024px) { .wk-article { grid-template-columns: 15rem minmax(0, 1fr); gap: 4.5rem; padding: 3.5rem 0 5rem; } }
.wk-article > aside > .wk-rail { display: none; }
@media (min-width: 1024px) {
    .wk-article > aside > .wk-rail { display: block; position: sticky; top: var(--wk-top); max-height: calc(100vh - var(--wk-top) - 2rem); overflow-y: auto; scrollbar-width: thin; }
    .wk-toc-mobile { display: none; }
}
.wk-article > aside[hidden] { display: none; }
.wk-article--solo { grid-template-columns: minmax(0, 1fr); }

/* Small screens: the outline folds into a disclosure above the text */
.wk-toc-mobile { border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-ink-2); }
.wk-toc-mobile summary {
    display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
    padding: .9rem 1.1rem; font-size: .9375rem; font-weight: 600; color: var(--lp-fg);
}
.wk-toc-mobile summary::-webkit-details-marker { display: none; }
.wk-toc-mobile summary i { color: var(--lp-mute); font-size: .8rem; transition: transform .2s; }
.wk-toc-mobile[open] summary i { transform: rotate(180deg); }
.wk-toc-mobile summary:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 2px; border-radius: 12px; }
.wk-toc-mobile .wk-rail { padding: 0 1.1rem 1rem; }

.wk-article__end { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--lp-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; max-width: 46rem; }
.wk-article__end p { margin: 0; color: var(--lp-mute); max-width: 26rem; line-height: 1.55; }

/* ---------- Markdown prose ---------- */
.wk-prose { max-width: 46rem; color: var(--lp-soft); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; }
.wk-prose > :first-child { margin-top: 0; }
.wk-prose h1, .wk-prose h2, .wk-prose h3, .wk-prose h4, .wk-prose h5, .wk-prose h6 {
    position: relative; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--lp-fg);
    letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
.wk-prose h1 { font-size: 2rem; font-weight: 700; margin: 2.75rem 0 1rem; }
.wk-prose h2 { font-size: 1.625rem; font-weight: 700; margin: 3.25rem 0 .9rem; padding-top: 1.75rem; border-top: 1px solid var(--lp-line); }
.wk-prose > h2:first-child { padding-top: 0; border-top: 0; }
.wk-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 2.25rem 0 .6rem; }
.wk-prose h4, .wk-prose h5, .wk-prose h6 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
/* Anchor to copy a link to a section; JS adds it, it shows on hover or focus */
.wk-anchor {
    margin-left: .5rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: .8em;
    color: var(--lp-dim); opacity: 0; transition: opacity .2s, color .2s; text-decoration: none;
}
.wk-prose :is(h2, h3, h4):hover .wk-anchor, .wk-anchor:focus-visible { opacity: 1; }
.wk-anchor:hover { color: var(--lp-link); }
.wk-anchor:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 2px; border-radius: 4px; }

.wk-prose p { margin: 0 0 1.25rem; }
.wk-prose strong { color: var(--lp-fg); font-weight: 600; }
.wk-prose em { color: var(--lp-fg); }
.wk-prose del, .wk-prose s { color: var(--lp-dim); }
.wk-prose a { color: var(--lp-link); text-decoration: underline; text-decoration-color: rgba(56, 169, 228, .45); text-underline-offset: .2em; transition: color .2s, text-decoration-color .2s; }
.wk-prose a:hover { color: var(--lp-link-2); text-decoration-color: currentColor; }
.wk-prose a:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 2px; border-radius: 3px; }

.wk-prose ul, .wk-prose ol { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.wk-prose li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
.wk-prose ul > li::before {
    content: ""; position: absolute; left: .3rem; top: .72em; width: 6px; height: 6px; border-radius: 1px;
    background: var(--lp-blue); transform: rotate(45deg);
}
.wk-prose ol { counter-reset: wk-ol; }
.wk-prose ol > li { counter-increment: wk-ol; padding-left: 2.1rem; }
.wk-prose ol > li::before {
    content: counter(wk-ol); position: absolute; left: 0; top: .2em; min-width: 1.45rem; text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; line-height: 1.45rem;
    color: var(--lp-link-2); border: 1px solid var(--lp-line-2); border-radius: 6px;
}
.wk-prose li > ul, .wk-prose li > ol { margin: .4rem 0 .4rem; }
.wk-prose li > p { margin: 0 0 .5rem; }

.wk-prose code {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86em; color: var(--lp-link-2);
    background: var(--lp-ink-3); border: 1px solid var(--lp-line); border-radius: 5px; padding: .1em .38em;
}
.wk-prose pre {
    position: relative; margin: 1.5rem 0 1.75rem; padding: 1.15rem 1.25rem; overflow-x: auto;
    background: #060b12; border: 1px solid var(--lp-line); border-radius: 12px; line-height: 1.6;
    scrollbar-width: thin; scrollbar-color: var(--lp-line-2) transparent;
}
.wk-prose pre code, .wk-prose pre code.hljs { background: transparent; border: 0; padding: 0; color: #d6e2ee; font-size: .8125rem; }
.wk-copy {
    position: absolute; top: .55rem; right: .55rem; font-family: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: .75rem; font-weight: 500; color: var(--lp-mute); background: var(--lp-ink-2);
    border: 1px solid var(--lp-line-2); border-radius: 6px; padding: .25rem .6rem; opacity: 0; transition: opacity .2s, color .2s;
}
.wk-prose pre:hover .wk-copy, .wk-copy:focus-visible, .wk-copy.is-done { opacity: 1; }
.wk-copy:hover { color: var(--lp-fg); }
.wk-copy:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 2px; }
@media (hover: none) { .wk-copy { opacity: 1; } }

.wk-prose blockquote {
    margin: 1.75rem 0; padding: 1rem 1.25rem; color: var(--lp-soft);
    background: var(--lp-ink-2); border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-blue); border-radius: 0 10px 10px 0;
}
.wk-prose blockquote > :last-child { margin-bottom: 0; }

.wk-prose hr { border: 0; border-top: 1px solid var(--lp-line); margin: 2.5rem 0; }
.wk-prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--lp-line); margin: 1.5rem 0; }

/* Tables scroll inside their own box on narrow screens (JS wraps them) */
.wk-table { margin: 1.5rem 0 1.75rem; border: 1px solid var(--lp-line); border-radius: 12px; overflow-x: auto; }
.wk-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.wk-prose th { text-align: left; font-size: .8125rem; font-weight: 600; color: var(--lp-mute); background: var(--lp-ink-2); padding: .75rem 1rem; border-bottom: 1px solid var(--lp-line); }
.wk-prose td { padding: .75rem 1rem; border-bottom: 1px solid var(--lp-line); vertical-align: top; }
.wk-prose tbody tr:last-child td { border-bottom: 0; }
.wk-prose tbody tr:hover { background: rgba(13, 26, 43, .6); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
    .wk-rail--armed .wk-rail__fill, .wk-rail a, .wk-rail a::before, .wk-entry > a, .wk-btn { transition: none; }
}