/* QuanterLab landing — Knowledge Base "reading room" drawer.
   Opens in place between the hero and Tour the Lab when Articles is clicked,
   keeping the navbar (the visitor never leaves the garden). Garden tokens only
   (gold accent, DM Sans, #0a0a0a surfaces) — NOT the in-platform emerald KB,
   which is exactly what made the old /articles page feel like a different site. */

/* ── The drawer shell — reveals in page flow at its natural (clamped) height.
   Deliberately NOT a max-height animation: some renderers fail to resolve a
   max-height override, leaving the drawer stuck collapsed. Existence is toggled
   via the [hidden] attribute (JS); the reveal is a pure opacity+transform fade,
   which every engine honours. The body below has a fixed clamped height, so the
   drawer's own height is stable. ── */
.kb-drawer {
    /* Resting state is fully VISIBLE (opacity 1). The reveal is a keyframe that
       plays 0 -> 1 when .open is added; a keyframe's start value only holds while
       it runs, so even if a renderer mishandles the animation the drawer settles
       visible — it can never get stuck invisible (unlike an opacity/max-height
       transition whose end-state a broken engine may fail to resolve). */
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(201, 169, 98, 0.06), transparent 60%),
        var(--bg-secondary);
    border-top: 1px solid rgba(201, 169, 98, 0.22);
    border-bottom: 1px solid var(--card-border);
    scroll-margin-top: 96px;   /* clear the fixed beta-banner + navbar on scroll-in */
}
.kb-drawer.open {
    animation: kbDrawerReveal 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes kbDrawerReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.kb-drawer-inner {
    max-width: var(--landing-max-width);
    margin: 0 auto;
    padding: 30px var(--landing-pad-x) 34px;
}

/* ── Head: heading + close ── */
.kb-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--card-border);
}
.kb-drawer-eyebrow {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 12px;
}
.kb-drawer-title {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 10px;
    text-wrap: balance;
}
.kb-drawer-sub {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 640px;
}
.kb-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.kb-close svg { width: 15px; height: 15px; }
.kb-close:hover {
    color: var(--accent-gold);
    border-color: rgba(201, 169, 98, 0.4);
    background: var(--accent-gold-dim);
}

/* ── Body: catalog rail + reader ── */
.kb-drawer-body {
    display: grid;
    grid-template-columns: 288px 1fr;
    gap: 28px;
    height: clamp(480px, 72vh, 860px);
}

/* ── Left rail — category accordion ── */
.kb-nav {
    overflow-y: auto;
    padding-right: 8px;
    border-right: 1px solid var(--card-border);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.kb-nav::-webkit-scrollbar { width: 8px; }
.kb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
.kb-cat { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.kb-cat-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 6px 13px 2px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-sans);
}
.kb-cat-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.kb-cat-count {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 2px 8px;
}
.kb-cat-chev {
    width: 15px; height: 15px;
    color: var(--text-muted);
    transition: transform 0.25s ease, color 0.2s ease;
}
.kb-cat-head:hover .kb-cat-name { color: var(--accent-gold); }
.kb-cat-head:hover .kb-cat-chev { color: var(--accent-gold); }
.kb-cat.open .kb-cat-chev { transform: rotate(180deg); }

.kb-cat-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.kb-cat.open .kb-cat-list { max-height: 2200px; }
.kb-art-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    margin-left: 2px;
    border-left: 2px solid transparent;
    border-radius: 0 5px 5px 0;
    text-decoration: none;
    color: var(--text-secondary);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.kb-art-title {
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.4;
}
.kb-art-time {
    font-size: 0.64rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.kb-art-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border-left-color: rgba(255, 255, 255, 0.28);
}
/* Active article — clean neutral selection (no muddy gold). Bright text +
   a crisp white left bar + a faint white wash reads as "you're here". */
.kb-art-link.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
    border-left-color: var(--text-primary);
}
.kb-art-link.active .kb-art-time { color: var(--text-secondary); }

/* ── Reader ── */
.kb-reader {
    overflow-y: auto;
    padding: 4px 8px 40px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    scroll-behavior: smooth;
}
.kb-reader::-webkit-scrollbar { width: 9px; }
.kb-reader::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
.kb-reader:focus { outline: none; }

/* Article prose — garden-native (gold accents), mirrors article.html but scoped */
.kb-reader-article {
    max-width: 720px;
    color: var(--text-secondary);
}
.kb-reader-article.loading { opacity: 0.4; }
.kb-article-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 14px;
}
.kb-article-kicker .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.kb-article-kicker .kb-time { color: var(--text-muted); letter-spacing: 0.06em; }
.kb-reader-article > h1,
.kb-article-h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0 0 26px;
    text-wrap: balance;
}
.kb-reader-article h2 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 40px 0 14px;
    padding-top: 6px;
}
.kb-reader-article h3 {
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 28px 0 10px;
}
.kb-reader-article p { font-size: 0.95rem; line-height: 1.72; margin: 0 0 18px; }
.kb-reader-article strong { color: var(--text-primary); font-weight: 600; }
.kb-reader-article a {
    color: var(--accent-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 169, 98, 0.3);
    transition: border-color 0.2s ease;
}
.kb-reader-article a:hover { border-bottom-color: var(--accent-gold); }
.kb-reader-article ul,
.kb-reader-article ol { margin: 0 0 20px; padding-left: 22px; }
.kb-reader-article li { font-size: 0.95rem; line-height: 1.65; margin-bottom: 8px; }
.kb-reader-article li::marker { color: var(--accent-gold); }
.kb-reader-article code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 1px 5px;
    color: #d6c79b;
}
.kb-reader-article pre {
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 0 0 20px;
}
.kb-reader-article pre code { background: none; border: none; padding: 0; }
.kb-reader-article blockquote {
    border-left: 3px solid rgba(201, 169, 98, 0.5);
    padding: 4px 0 4px 18px;
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-style: italic;
}
.kb-reader-article .article-callout,
.kb-reader-article .further-reading {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 24px 0;
}
.kb-reader-article .further-reading h2,
.kb-reader-article .further-reading h3 { margin-top: 0; }

/* Footer of a read article — jump back to the full standalone page for sharing */
.kb-article-foot {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}
.kb-article-foot a {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.kb-article-foot a:hover { color: var(--accent-gold); border-bottom-color: rgba(201, 169, 98, 0.4); }

.kb-reader-error {
    padding: 40px 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.kb-reader-error a { color: var(--accent-gold); }

/* ── Responsive ── */
@media (max-width: 860px) {
    .kb-drawer-inner { padding: 24px var(--landing-pad-x-sm) 28px; }
    .kb-drawer-head { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
    .kb-close { align-self: flex-end; }
    .kb-drawer-title { font-size: 1.5rem; }
    .kb-drawer-body {
        grid-template-columns: 1fr;
        height: auto;
    }
    .kb-nav {
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        padding-right: 0;
        padding-bottom: 8px;
        max-height: 40vh;
    }
    .kb-reader { max-height: none; overflow: visible; padding-bottom: 12px; }
    .kb-reader-article > h1, .kb-article-h1 { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kb-drawer.open { animation: none; }
    .kb-cat-list, .kb-cat-chev, .kb-art-link, .kb-close { transition: none; }
}