/* Knowledge library styles. Reading column lifted from the articles, plus the
   search box, category grid, and ask panel. Uses only style.css tokens so both
   the dark (channel) and light (slate) themes work. */

html { scroll-behavior: smooth; }
.wrap.reading { max-width: 760px; }

/* ---- reading column ---- */
.arthead { padding: 40px 0 0; }
.arthead .eyebrow { font: 600 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.arthead h1 { font: 600 clamp(28px, 4.4vw, 40px)/1.12 var(--sans); letter-spacing: -0.02em; margin: 12px 0 0; color: var(--ink); }
.arthead .lede { font-size: 18px; line-height: 1.55; color: var(--muted); margin-top: 16px; }
.artmeta { display: flex; gap: 10px; align-items: center; margin-top: 18px; font: 400 12px var(--mono); color: var(--faint); flex-wrap: wrap; }
.artmeta .d { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.artmeta a { color: var(--accent); text-decoration: none; }

article { color: color-mix(in srgb, var(--ink) 84%, var(--muted)); }
article section, article > h2 { margin-top: 34px; }
article h2 { font: 600 22px/1.25 var(--sans); letter-spacing: -0.01em; color: var(--ink); margin: 34px 0 12px; scroll-margin-top: 80px; }
article h3 { font: 600 16px/1.3 var(--sans); color: var(--ink); margin: 24px 0 8px; scroll-margin-top: 80px; }
article p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; }
article ul, article ol { margin: 0 0 14px; padding-left: 22px; }
article li { margin: 4px 0; line-height: 1.6; font-size: 15.5px; }
article strong { color: var(--ink); font-weight: 600; }
article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
article a:hover { border-bottom-color: var(--accent); }
article a.anchor { border: 0; color: var(--faint); opacity: 0; margin-left: -1em; padding-right: 0.3em; font-weight: 400; }
article h2:hover a.anchor, article h3:hover a.anchor { opacity: 1; }

article code { font: 500 0.86em var(--mono); color: var(--accent); background: var(--accent-dim, color-mix(in srgb, var(--accent) 12%, transparent)); padding: 0.1em 0.36em; border-radius: 3px; word-break: break-word; }
article pre { margin: 0 0 15px; padding: 14px 16px; overflow-x: auto; background: var(--panel-2, var(--panel)); border: 1px solid var(--line); border-radius: 4px; }
article pre code { background: none; color: var(--ink); padding: 0; font: 400 12.5px/1.6 var(--mono); }
article blockquote { margin: 8px 0 15px; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--accent-dim, color-mix(in srgb, var(--accent) 10%, transparent)); border-radius: 0 4px 4px 0; }
article blockquote p { margin: 0; }

table.kb-table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 13.5px; display: block; overflow-x: auto; }
table.kb-table th, table.kb-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kb-table th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
table.kb-table code { white-space: nowrap; }

/* ---- breadcrumb + cta + related ---- */
.kb-crumb { display: flex; gap: 8px; align-items: center; margin: 18px 0 0; font: 500 12px var(--mono); color: var(--muted); }
.kb-crumb a { color: var(--muted); text-decoration: none; }
.kb-crumb a:hover { color: var(--accent); }
.kb-crumb .d { color: var(--faint); }

.kb-cta { margin: 34px 0; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 6px; background: var(--accent-dim, color-mix(in srgb, var(--accent) 8%, transparent)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kb-cta .k { font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

.kb-related { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 20px; }
.kb-related h2 { font-size: 15px; margin: 0 0 12px; }
.kb-related ul { list-style: none; padding: 0; margin: 0; }
.kb-related li { margin: 0 0 10px; }
.kb-related li a { font-weight: 600; }
.kb-related li span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }

/* ---- search box ---- */
.kb-search { position: relative; margin: 24px 0 8px; }
.kb-search-form { display: flex; gap: 8px; align-items: center; }
.kb-search input[type=search] { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); font: 400 15px var(--sans); }
.kb-search input[type=search]:focus { outline: none; border-color: var(--accent); }
.kb-suggest { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); overflow: hidden; }
.kb-suggest button { display: block; width: 100%; text-align: left; padding: 9px 14px; background: none; border: 0; color: var(--ink); font: 400 14px var(--sans); cursor: pointer; }
.kb-suggest button:hover, .kb-suggest button.on { background: var(--accent-dim, color-mix(in srgb, var(--accent) 12%, transparent)); }

/* ---- results (index page + as-you-type) ---- */
.kb-results { margin: 8px 0 28px; }
.kb-result { padding: 14px 0; border-bottom: 1px solid var(--line); }
.kb-result .exact { display: inline-block; font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 2px 6px; border-radius: 3px; margin-bottom: 6px; }
.kb-result a.rt { font: 600 16px var(--sans); color: var(--ink); text-decoration: none; }
.kb-result a.rt:hover { color: var(--accent); text-decoration: none; }
.kb-result .rc { font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 8px; }
.kb-result .sec { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--line); }
.kb-result .sec a { font-size: 13px; color: var(--muted); text-decoration: none; }
.kb-result .sec .snip { font-size: 13px; color: var(--muted); }
.kb-result .sec mark, .kb-result .snip mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); border-radius: 2px; }
.kb-empty { color: var(--muted); padding: 16px 0; }
.kb-empty a { color: var(--accent); }

/* ---- category grid + index list ---- */
.kb-hero h1 { max-width: 12ch; }
.kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 28px 0; }
.kb-cat { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; background: var(--panel); transition: border-color 0.15s; }
.kb-cat, .kb-cat:hover, .kb-cat:hover * { text-decoration: none; }
.kb-cat:hover { border-color: var(--accent); }
.kb-cat:hover .kb-cat-h { color: var(--accent); }
.kb-cat-h { font: 600 15px var(--sans); color: var(--ink); }
.kb-cat p { font-size: 13px; color: var(--muted); margin: 6px 0 10px; line-height: 1.5; }
.kb-cat-n { font: 500 11px var(--mono); color: var(--faint); }
.kb-all h2 { font-size: 15px; margin: 30px 0 12px; }
.kb-index { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
.kb-index li { margin: 0 0 8px; break-inside: avoid; }
.kb-index a { color: var(--ink); text-decoration: none; }
.kb-index a:hover { color: var(--accent); text-decoration: none; }
.kb-index .kb-tag { font: 500 10px var(--mono); color: var(--faint); text-transform: uppercase; }
.kb-list { list-style: none; padding: 0; margin: 20px 0; }
.kb-list li { margin: 0 0 4px; }
.kb-list li a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; }
.kb-list li a:hover { border-color: var(--accent); text-decoration: none; }
.kb-list strong { color: var(--ink); display: block; }
.kb-list span { color: var(--muted); font-size: 13.5px; }

/* ---- ask panel ---- */
.kb-ask-panel { margin-top: 12px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 6px; background: var(--panel); }
.kb-ask-panel .ask-q { font: 600 13px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.kb-ask-panel .ask-a { font-size: 15px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.kb-ask-panel .ask-cites { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.kb-ask-panel .ask-cites a { display: block; font-size: 13px; color: var(--accent); text-decoration: none; margin: 4px 0; }
.kb-ask-panel .ask-note { font-size: 12px; color: var(--faint); margin-top: 8px; }

.footnav { display: flex; flex-wrap: wrap; gap: 14px; }
.footnote { color: var(--faint); font-size: 12px; margin: 10px 0 0; }

@media (max-width: 560px) { .kb-index { columns: 1; } }