/* ======================================================================
 * Knowledge Hub chrome — persistent top nav + left rail + global search.
 *
 * Loaded by BOTH the hub (/ai-builder/docs) and every help doc page
 * (via DocsLayout). Every selector is namespaced `.kh-` because ~90 doc
 * pages ship their own <style is:global> block; an unprefixed rule here
 * would collide with one of them.
 *
 * HEIGHT CONTRACT: --kh-nav-h must stay 53px. Help doc pages hardcode
 * `--nav-h:53px` and stick their own TOC rail at `top:var(--nav-h)`.
 * Changing this number silently misaligns 86 pages.
 * ====================================================================== */

:root {
  --kh-nav-h: 53px;
  --kh-rail-w: 228px;
  --kh-rail-collapsed: 56px;

  --kh-ink: #1a1a1a;
  --kh-ink-2: #4c4c4c;
  --kh-ink-3: #707070;
  --kh-muted: #9b9b9b;
  --kh-stroke: #e5e5e5;
  --kh-paper: #ffffff;
  --kh-paper-2: #fafafa;
  --kh-gold: #f5c84b;
  --kh-gold-tint: #fbefc4;
  --kh-font: 'Macan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kh-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------- shell */

.kh-shell {
  display: flex;
  align-items: flex-start;
}

.kh-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------- top nav */

.kh-topnav {
  height: var(--kh-nav-h);
  border-bottom: 1px solid var(--kh-stroke);
  background: var(--kh-paper);
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px 0 18px;
  font-family: var(--kh-font);
}

.kh-topnav .kh-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--kh-ink);
  flex-shrink: 0;
}

.kh-topnav .kh-nav-sep {
  width: 1px;
  height: 20px;
  background: var(--kh-stroke);
  margin: 0 14px;
  flex-shrink: 0;
}

.kh-topnav .kh-program {
  font-size: 13.5px;
  color: var(--kh-ink-2);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.kh-topnav .kh-program:hover { color: var(--kh-ink); }

.kh-return {
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--kh-font);
  color: var(--kh-ink);
  text-decoration: none;
  border: 1.5px solid var(--kh-stroke);
  background: var(--kh-paper);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}

.kh-return:hover { border-color: #bdbdbd; background: #fafafa; }

/* --------------------------------------------------------- global search */

/* Sits in the top nav, so it is present on the hub AND on every help doc.
   The old build put search inside the hub's sidebar only, which is why
   clicking into a doc lost it entirely. */
.kh-search {
  position: relative;
  margin: 0 auto;
  width: min(440px, 100%);
  flex: 0 1 440px;
}

.kh-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 11px;
  border: 1.5px solid var(--kh-stroke);
  border-radius: 9px;
  background: var(--kh-paper-2);
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.kh-search-field:focus-within {
  border-color: var(--kh-gold);
  background: var(--kh-paper);
  box-shadow: 0 0 0 3px rgba(245, 200, 75, .18);
}

.kh-search-icon {
  display: flex;
  color: var(--kh-muted);
  flex-shrink: 0;
}

.kh-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--kh-font);
  font-size: 13.5px;
  color: var(--kh-ink);
}

.kh-search input::placeholder { color: var(--kh-muted); }
.kh-search input::-webkit-search-cancel-button { display: none; }

.kh-kbd {
  font-family: var(--kh-mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--kh-muted);
  background: #fff;
  border: 1px solid var(--kh-stroke);
  border-radius: 5px;
  padding: 3px 5px;
  flex-shrink: 0;
}

.kh-search-field:focus-within .kh-kbd { display: none; }

/* results dropdown */
.kh-results {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: min(460px, 72vh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--kh-stroke);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .05);
  display: none;
  z-index: 130;
  padding: 5px;
}

.kh-results.is-open { display: block; }

.kh-res-group {
  font-family: var(--kh-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kh-muted);
  padding: 10px 10px 5px;
}

.kh-res {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.kh-res:hover,
.kh-res.is-active { background: var(--kh-gold-tint); }

.kh-res-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--kh-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kh-res-pill {
  font-family: var(--kh-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a5b00;
  background: var(--kh-gold-tint);
  border-radius: 999px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.kh-res.is-active .kh-res-pill,
.kh-res:hover .kh-res-pill { background: #fff; }

.kh-res-snip {
  font-size: 12px;
  color: var(--kh-ink-3);
  margin-top: 2px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kh-res-snip mark {
  background: transparent;
  color: var(--kh-ink);
  font-weight: 600;
}

.kh-res-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--kh-muted);
}

/* ----------------------------------------------------------------- rail */

.kh-rail {
  flex: 0 0 var(--kh-rail-w);
  width: var(--kh-rail-w);
  position: relative;
  z-index: 110;
}

.kh-rail-inner {
  position: sticky;
  top: var(--kh-nav-h);
  height: calc(100vh - var(--kh-nav-h));
  width: var(--kh-rail-w);
  border-right: 1px solid var(--kh-stroke);
  background: var(--kh-paper-2);
  padding: 12px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--kh-font);
  transition: width .18s ease, box-shadow .18s ease;
}

/* Collapsed variant — used on help doc pages, where the page's own
   "On this page" TOC already owns a 264px column. Hover overlays the
   full rail instead of reflowing the document. */
.kh-rail.is-compact {
  flex-basis: var(--kh-rail-collapsed);
  width: var(--kh-rail-collapsed);
}

.kh-rail.is-compact .kh-rail-inner {
  width: var(--kh-rail-collapsed);
  padding: 12px 8px;
}

.kh-rail.is-compact:hover .kh-rail-inner,
.kh-rail.is-compact:focus-within .kh-rail-inner {
  width: var(--kh-rail-w);
  box-shadow: 8px 0 26px rgba(0, 0, 0, .09);
}

.kh-rail-kicker {
  font-family: var(--kh-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kh-muted);
  padding: 8px 10px 6px;
  white-space: nowrap;
}

.kh-rail.is-compact .kh-rail-kicker { opacity: 0; transition: opacity .12s; }
.kh-rail.is-compact:hover .kh-rail-kicker { opacity: 1; }

.kh-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--kh-font);
  font-size: 13.5px;
  color: var(--kh-ink-2);
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.kh-navitem + .kh-navitem { margin-top: 2px; }

.kh-navicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  color: currentColor;
}

/* Level markers are text, not an icon. Collapsed to 56px the rail shows
   only this box, so "L1".."L4" is the only thing telling the levels apart. */
.kh-levelbadge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--kh-ink-2);
  background: #ededed;
  border-radius: 5px;
  height: 20px;
  transition: background .12s, color .12s;
}

.kh-navitem:hover .kh-levelbadge { background: #e0e0e0; color: var(--kh-ink); }

.kh-navitem.is-active .kh-levelbadge {
  background: var(--kh-gold);
  color: #1a1a1a;
}

.kh-navlabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh-navitem:hover { background: #eee; color: var(--kh-ink); }

.kh-navitem.is-active {
  background: var(--kh-gold-tint);
  color: var(--kh-ink);
  font-weight: 500;
}

.kh-pill-new {
  font-family: var(--kh-mono);
  font-size: 8.5px;
  letter-spacing: .09em;
  color: #2f6b4f;
  background: #e4f2ea;
  border-radius: 999px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.kh-rail-div {
  height: 1px;
  background: var(--kh-stroke);
  margin: 12px 10px;
}

.kh-navitem.is-soon {
  color: var(--kh-muted);
  cursor: default;
}

.kh-navitem.is-soon:hover { background: none; color: var(--kh-muted); }

.kh-pill-soon {
  font-family: var(--kh-mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  color: var(--kh-muted);
  background: #f0f0f0;
  border-radius: 999px;
  padding: 2px 6px;
  flex-shrink: 0;
}

/* Labels/pills fade out when collapsed so only icons show. */
.kh-rail.is-compact .kh-navlabel,
.kh-rail.is-compact .kh-pill-new,
.kh-rail.is-compact .kh-pill-soon {
  opacity: 0;
  transition: opacity .12s ease;
}

.kh-rail.is-compact:hover .kh-navlabel,
.kh-rail.is-compact:hover .kh-pill-new,
.kh-rail.is-compact:hover .kh-pill-soon {
  opacity: 1;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .kh-shell { display: block; }

  .kh-rail,
  .kh-rail.is-compact {
    width: 100%;
    flex-basis: auto;
  }

  .kh-rail-inner,
  .kh-rail.is-compact .kh-rail-inner {
    position: static;
    height: auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--kh-stroke);
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 12px;
  }

  .kh-rail-kicker,
  .kh-rail-div { display: none; }

  .kh-navitem { width: auto; padding: 7px 11px; }
  .kh-navitem + .kh-navitem { margin-top: 0; }

  .kh-rail.is-compact .kh-navlabel,
  .kh-rail.is-compact .kh-pill-new,
  .kh-rail.is-compact .kh-pill-soon { opacity: 1; }

  .kh-topnav { padding: 0 12px; gap: 8px; }
  .kh-topnav .kh-nav-sep,
  .kh-topnav .kh-program { display: none; }
  .kh-search { flex: 1 1 auto; }
  .kh-return { padding: 6px 10px; font-size: 12.5px; }
  .kh-return span { display: none; }
}