/*
 * The knowledge page in the library's cinematic look. knowledge.css is written against CSS variables, so most of the
 * work is remapping them (its "teal" accent becomes the library's gold); the rules below fix what a plain remap
 * cannot: text on the gold fill, inputs, the sticky shell.
 */
:root {
  color-scheme: dark;
  --bg: #08080a;
  --panel: #121216;
  --panel-2: #18181d;
  --ink: #efe9dd;
  --muted: #8d8880;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --teal: #d6ac5f;
  --teal-dark: #f1d08f;
  --aqua: rgba(214, 172, 95, 0.13);
  --gold: #e3bd74;
  --gold-soft: rgba(214, 172, 95, 0.12);
  --rose: #ea7a6d;
  --rose-soft: rgba(234, 122, 109, 0.12);
  --shadow: none;
}
body { font-family: var(--font-body); font-size: 14px; line-height: 1.7; }
.lib-header { flex: none; }
.kb-header { background: rgba(18, 18, 22, 0.9); border-bottom: 1px solid var(--line); padding: 10px 24px; }
.kb-brand strong { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: 0.1em; }
.kb-brand span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; }
.kb-search { background: rgba(255, 255, 255, 0.03); border-radius: 4px; }
.kb-search:focus-within { background: rgba(214, 172, 95, 0.05); box-shadow: 0 0 0 3px var(--gold-dim); }
.kb-search input { color: var(--ink); }
.kb-search input::placeholder { color: #5d5951; }
.kb-button { border-radius: 4px; background: rgba(255, 255, 255, 0.02); color: var(--ink); letter-spacing: 0.04em; }
.kb-button:hover { background: var(--gold-dim); }
.kb-button b, .kb-button.primary, .kb-button.primary:hover { color: #17110a; }
.kb-button.primary { background: linear-gradient(180deg, #f1d08f, #d6ac5f); font-weight: 600; }
.kb-button.primary:hover { background: linear-gradient(180deg, #f8dda4, #f1d08f); }
.kb-sidebar { background: var(--bg); border-right: 1px solid var(--line); }
.kb-collections button.active { background: var(--gold-dim); color: var(--gold-2); box-shadow: inset 2px 0 0 var(--gold); }
.kb-card { background: linear-gradient(180deg, var(--panel), var(--bg)); border-radius: 4px; }
.kb-card:hover { border-color: var(--gold-line); }
.kb-card.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 30px -12px rgba(214, 172, 95, 0.5); }
.kb-detail h2, .kb-list-head h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; }
.kb-tray { background: var(--panel); }
.kb-filter select { background: rgba(255, 255, 255, 0.03); color: var(--ink); border-color: var(--line-strong); border-radius: 4px; }
.kb-filter select option { background: var(--panel-2); color: var(--ink); }
pre, code { color: var(--ink-2); }
kbd { background: var(--panel-2); color: var(--ink-2); border-color: var(--line-strong); }
.kb-detail a, .kb-card a { color: var(--gold-2); }