/* Same navigation identity and behavior; each space supplies its own palette. */
:root { --kh-bg:#f4f2e9; --kh-ink:#192b25; --kh-muted:#46564b; --kh-line:#c9cdc3; --kh-hover:#e2e6da; --kh-panel-bg:#fffef8; --kh-focus:#246247; }
body:has([data-kh-space="glossary"]), body:has([data-kh-space="workshop"]) { --kh-bg:#fff; --kh-ink:#20252b; --kh-muted:#515b69; --kh-line:#dce1e8; --kh-hover:#edf3ff; --kh-panel-bg:#fff; --kh-focus:#174dcc; }
body:has([data-kh-space="gm"]) { --kh-bg:#19231f; --kh-ink:#f7f3e6; --kh-muted:#c6cebf; --kh-line:#465348; --kh-hover:#2b3b30; --kh-panel-bg:#202d26; --kh-focus:#e7cf91; }
body:has([data-kh-space="compass"]) { --kh-bg:#f5f0e7; --kh-ink:#1b1915; --kh-muted:#5c554b; --kh-line:#d9d0c0; --kh-hover:#e9dfcf; --kh-panel-bg:#fffcf6; --kh-focus:#a33c20; }
body.edition-ai, body:has([data-kh-space="evolution"]) { --kh-ink:#332c2a; --kh-muted:#66514a; --kh-focus:#8b4934; --kh-hover:#eadfd4; }
/* Kyle Hobson's shared navigation. Product headers remain locally owned. */
:root { --kh-bar-height: 56px; }
.kh-network, .kh-network * { box-sizing: border-box; }
.kh-network {
  position: sticky; top: 0; z-index: 60; isolation: isolate;
  width: 100%; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--kh-line);
  background: var(--kh-bg); color: var(--kh-ink); text-align: left;
  font: 400 14px/1.4 Arial, Helvetica, sans-serif; letter-spacing: normal;
}
.kh-network--flow { position: relative; }
.kh-network .kh-inner { max-width: 1440px; min-height: calc(var(--kh-bar-height) - 1px); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 22px; }
.kh-network a { color: var(--kh-ink); text-decoration: none; border: 0; box-shadow: none; background: transparent; font: inherit; letter-spacing: normal; text-transform: none; }
.kh-network a::after { content: none; }
.kh-network .kh-home { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 700; white-space: nowrap; }
.kh-network .kh-home-symbol { font-size: 20px; font-weight: 400; line-height: 1; }
.kh-network .kh-current { border-left: 1px solid var(--kh-line); padding-left: 22px; font-size: 13px; color: var(--kh-muted); }
.kh-network .kh-menu { position: static; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; }
.kh-network .kh-menu > summary { display: flex; align-items: center; justify-content: center; gap: 10px; list-style: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--kh-ink); cursor: pointer; font: 700 14px/1.4 Arial, Helvetica, sans-serif; }
.kh-network summary::-webkit-details-marker { display: none; }
.kh-network summary::after { content: none; }
.kh-network .kh-menu[open] > summary, .kh-network summary:hover { background: var(--kh-hover); }
.kh-network .kh-caret { display: inline-block; transition: transform 120ms; }
.kh-network .kh-menu[open] .kh-caret { transform: rotate(180deg); }
.kh-network .kh-menu:not([open]) .kh-panel { display: none; }
.kh-network .kh-panel { position: absolute; right: 24px; top: calc(100% + 8px); width: min(660px, calc(100% - 32px)); max-height: calc(100dvh - var(--kh-bar-height) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: var(--kh-panel-bg); color: var(--kh-ink); border: 1px solid var(--kh-line); border-radius: 8px; box-shadow: 0 12px 36px #13251d26; }
.kh-network .kh-panel-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 8px 12px; border-bottom: 1px solid var(--kh-line); }
.kh-network .kh-panel-top a { display: flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.kh-network .kh-note { max-width: 220px; color: var(--kh-muted); font-size: 12px; text-align: right; margin: 0; }
.kh-network .kh-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 12px; }
.kh-network .kh-destination { display: block; min-height: 84px; border-radius: 4px; padding: 13px 12px; line-height: 1.4; }
.kh-network .kh-destination:hover, .kh-network .kh-destination[aria-current] { background: var(--kh-hover); }
.kh-network .kh-destination strong { display: block; font: 700 15px/1.4 Arial, Helvetica, sans-serif; color: var(--kh-ink); }
.kh-network .kh-destination small { display: block; font: 400 12px/1.5 Arial, Helvetica, sans-serif; color: var(--kh-muted); margin-top: 3px; }
.kh-network .kh-destination em { font: 400 11px/1.4 Arial, Helvetica, sans-serif; margin-left: 6px; color: var(--kh-muted); white-space: nowrap; }
.kh-network :is(a, summary):focus-visible { outline: 3px solid var(--kh-focus); outline-offset: 3px; }
@media (max-width: 640px) {
  :root { --kh-bar-height: 80px; }
  .kh-network .kh-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 25px; gap: 0 10px; padding: 4px 16px 6px; }
  .kh-network .kh-current { border: 0; padding: 0 0 0 27px; grid-column: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .kh-network .kh-menu { grid-column: 2; grid-row: 1 / 3; }
  .kh-network .kh-panel { right: 16px; padding: 12px; }
  .kh-network .kh-destinations { grid-template-columns: 1fr; gap: 2px; padding-top: 8px; }
  .kh-network .kh-destination { min-height: 68px; padding: 10px 12px; }
  .kh-network .kh-panel-top { padding: 0 8px 8px; }
}
@media (prefers-reduced-motion: reduce) { .kh-network .kh-caret { transition: none; } }

/* App and deep-reference pages reserve their strongest emphasis for the task. */
body:has(.kh-network--compact) { --kh-bar-height:44px; }
.kh-network--compact .kh-inner { min-height:43px; gap:16px; }
.kh-network--compact .kh-home, .kh-network--compact .kh-menu > summary { font-size:12px; font-weight:500; }
.kh-network--compact .kh-home-symbol { font-size:16px; }
.kh-network--compact .kh-current { font-size:12px; padding-left:16px; }
@media(max-width:640px) {
  .kh-network--compact .kh-inner { display:flex; padding:0 16px; min-height:43px; }
  .kh-network--compact .kh-current { display:none; }
}
/* Footer navigation stays in document flow and uses the same host palette. */
.kh-footer, .kh-footer * { box-sizing:border-box; }
.kh-footer { position:relative; background:var(--kh-bg); color:var(--kh-muted); border-top:1px solid var(--kh-line); font:400 12px/1.5 Arial,Helvetica,sans-serif; }
.kh-footer .kh-footer-inner { max-width:1440px; margin:auto; padding:20px 32px; display:flex; gap:24px; align-items:center; }
.kh-footer a { color:var(--kh-muted); text-decoration:none; border:0; box-shadow:none; background:none; min-height:44px; display:inline-flex; align-items:center; padding:6px 0; font:inherit; }
.kh-footer a::after { content:none; }
.kh-footer a:hover { color:var(--kh-ink); text-decoration:underline; text-underline-offset:4px; }
.kh-footer a:focus-visible { outline:3px solid var(--kh-focus); outline-offset:3px; }
.kh-footer .kh-footer-home { flex-shrink:0; font-weight:700; color:var(--kh-ink); gap:12px; }
.kh-footer-home span { font-weight:400; }
.kh-footer .kh-footer-links { display:flex; flex-wrap:wrap; column-gap:20px; margin-left:auto; }
.kh-footer a[aria-current] { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:900px) { .kh-footer .kh-footer-inner { align-items:flex-start; flex-direction:column; gap:4px; } .kh-footer .kh-footer-links { margin:0; } }
@media(max-width:640px) { .kh-footer .kh-footer-inner { padding:16px; } .kh-footer .kh-footer-links { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:0 20px; } }