/**
 * Canonical site chrome (Ink & Signal) — shared by Astro pages and legacy tools/guides.
 * One header markup + one stylesheet everywhere.
 */
:root {
  --kc-ink: #07080c;
  --kc-signal: #b8ff78;
  --kc-signal-dim: #7fbf4a;
  --kc-text: #eef2f7;
  --kc-muted: #8b93a7;
  --kc-glow: rgb(184 255 120 / 18%);
  --kc-header-h: 64px;
  --kc-max: 1120px;
  --kc-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Syne", sans-serif;
  --kc-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Manrope", sans-serif;
}

.kc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--kc-header-h);
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgb(7 8 12 / 78%);
  border-bottom: 1px solid rgb(184 255 120 / 14%);
  font-family: var(--kc-font-body);
  color: var(--kc-text);
}

.kc-header-inner {
  width: min(100% - 2rem, var(--kc-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none !important;
  color: var(--kc-text) !important;
}

.kc-brand:hover {
  color: var(--kc-text) !important;
}

.kc-brand-mark {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  background: linear-gradient(145deg, var(--kc-signal), var(--kc-signal-dim));
  color: #0a0b0f;
  font-family: var(--kc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 0 24px var(--kc-glow);
  flex-shrink: 0;
}

.kc-brand-name {
  font-family: var(--kc-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.kc-brand-sub {
  display: none;
  margin-left: 0.35rem;
  color: var(--kc-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

@media (min-width: 720px) {
  .kc-brand-sub {
    display: inline;
  }
}

.kc-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1rem;
  font-size: 0.9rem;
  color: var(--kc-muted);
}

.kc-nav a {
  text-decoration: none !important;
  padding: 0.35rem 0.2rem;
  color: var(--kc-muted) !important;
}

.kc-nav a:hover,
.kc-nav a[aria-current="page"] {
  color: var(--kc-signal) !important;
}

/* Harden: page CSS often does `nav { position:fixed; top:0 }` — keep chrome intact */
.kc-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
}

.kc-header .kc-nav,
nav.kc-nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.35rem 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  z-index: auto !important;
  display: flex !important;
}

body:has(.kc-header) nav.breadcrumb,
body:has(.kc-header) .breadcrumb {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  z-index: auto !important;
}

/* Hide EVERY legacy site chrome nav when the unified header is present.
   Breadcrumbs / in-tool tabs are excluded. */
body:has(.kc-header) > nav:not([class]):not([data-site-policy-links]),
body:has(.kc-header) nav.nav-bar,
body:has(.kc-header) nav.nav-top,
body:has(.kc-header) nav.navbar,
body:has(.kc-header) nav.site-nav,
body:has(.kc-header) nav.main-nav,
body:has(.kc-header) nav.page-nav,
body:has(.kc-header) nav.tool-nav,
body:has(.kc-header) .top-nav,
body:has(.kc-header) nav:has(> .nav-inner),
body:has(.kc-header) nav:has(.back-home),
body:has(.kc-header) nav:has(.nav-content),
body:has(.kc-header) header.site-header,
body:has(.kc-header) .site-header,
body:has(.kc-header) .kc-tool-bar:not(.kc-header) {
  display: none !important;
}

/* Match .wu-lang-switch (cyan pill). .kc-nav a otherwise paints current as signal green. */
.kc-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0.75rem;
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 8px;
  background: rgba(12, 18, 32, 0.82);
  border: 1px solid rgba(34, 211, 238, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kc-nav .kc-lang a,
.kc-lang a {
  color: #22d3ee !important;
  text-decoration: none !important;
  opacity: 0.75;
  padding: 0 !important;
  font-weight: 500;
}

.kc-nav .kc-lang a:hover,
.kc-lang a:hover {
  color: #22d3ee !important;
  opacity: 1;
}

.kc-nav .kc-lang a[aria-current="page"],
.kc-lang a[aria-current="page"] {
  color: #22d3ee !important;
  opacity: 1;
  font-weight: 600;
  text-decoration: underline !important;
}

.kc-lang .sep,
.kc-lang [aria-hidden="true"] {
  opacity: 0.4;
  color: #22d3ee;
}

body:has(.kc-lang) .wu-lang-switch {
  display: none !important;
}