:root {
  /* Type families */
  --body-font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --headlines-font-family: "Freight Display Pro", Georgia, "Times New Roman", serif;

  /* Filed neutrals (warm brown scale). Mapped onto Pylon's
     --neutral-* names so the original selectors below keep working. */
  --bone:#F9F7F5;
  --cream:#F4ECDE;
  --stone:#EBE3D5;
  --pebble:#D4CABC;
  --ash:#A89C8E;
  --flint:#736759;
  --charcoal:#4A3C2E;
  --ink:#1E150E;

  --neutral-base: var(--bone);
  --neutral-100:  var(--stone);     /* warm "subtle" surface */
  --neutral-200:  var(--pebble);    /* borders / hairlines */
  --neutral-400:  var(--ash);       /* tertiary text */
  --neutral-500:  var(--ash);
  --neutral-600:  var(--flint);     /* secondary text */
  --neutral-700:  var(--flint);
  --neutral-800:  var(--ink);
  --neutral-900:  var(--ink);

  /* Espresso brand scale */
  --espresso:      #704B30;
  --espresso-dark: #5D3C24;
  --espresso-deep: #492D19;
  --espresso-light:#BAA698;
  --espresso-tint: #D9D3CF;

  /* Primary / link — espresso by default, overridden by Org BrandColorHex */
  --primaryColor: var(--espresso);
  --text-link-color: var(--espresso);

  /* Legacy callout colors (kept so article-body callouts work) */
  --blue-50:  #F4ECDE;     /* re-tinted to cream so internal-note panels look warm */
  --blue-100: #E8DDC4;
  --slate-400: var(--ash);
  --slate-500: var(--flint);

  /* Shape — sharp, editorial */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Warm-tinted shadows */
  --shadow-sm: 0 1px 2px rgba(30,21,14,.04), 0 0 0 1px rgba(30,21,14,.04);
  --shadow-md: 0 4px 16px rgba(30,21,14,.06), 0 1px 2px rgba(30,21,14,.04);
  --shadow-lg: 0 12px 40px rgba(30,21,14,.10), 0 2px 6px rgba(30,21,14,.04);

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--body-font-family);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
img { display: block; }

/* Filed never uses italics for emphasis. Render <em>/<i> as Book-weight espresso. */
em, i { font-style: normal; font-weight: 500; color: var(--espresso); }

/* ============================================================
   LAYOUT
   ============================================================ */
.kb-page-layout {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--bone);
}

.kb-content-wrapper,
.kb-collection-content-wrapper,
.kb-article-content-wrapper,
.kb-not-found-content-wrapper {
  display: flex; width: 100%; flex: 1;
  justify-content: center;
  padding: 0 32px 64px;
  background: var(--bone);
}
.kb-content-wrapper { padding-top: 56px; }
.kb-collection-content-wrapper #kb-search-results,
.kb-article-content-wrapper #kb-search-results,
.kb-not-found-content-wrapper #kb-search-results { margin-top: 32px; }

.kb-content {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  flex: 1;
}

/* ============================================================
   BANNER (homepage only)
   ============================================================ */
.kb-banner {
  position: relative;
  z-index: 1;
  height: 360px;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  transition: height 500ms ease-in-out, min-height 500ms ease-in-out;
}
.kb-banner[data-kb-state="searching"] {
  height: 168px;
  min-height: 168px;
}

.kb-banner-bg { position: absolute; inset: 0; overflow: clip; z-index: -1; }
.kb-banner-bg-color {
  position: absolute; z-index: -1; inset: 0;
  background-size: cover; background-position: center;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}
.kb-banner[data-kb-state="searching"] .kb-banner-bg-color { opacity: 0; }

.kb-banner-bg-image {
  position: absolute; z-index: -1; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.1);
  filter: contrast(1.04);
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}
.kb-banner[data-kb-state="searching"] .kb-banner-bg-image { opacity: 0; }

.kb-banner-bg-blur {
  pointer-events: none;
  position: absolute; top: 50%; left: 50%;
  width: 1000px; max-width: 100%; height: 1000px;
  transform: translate(-50%, -50%);
  filter: blur(160px) saturate(.7);
  opacity: .35;
  transition: opacity 500ms ease-in-out;
}
.kb-banner[data-kb-state="searching"] .kb-banner-bg-blur { opacity: 0; }

/* Default banner backdrop: ink with warm texture (no flat fills). */
.kb-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--ink);
}
/* Legibility overlay sits on top of any image/color backdrop */
.kb-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(30,21,14,.20) 0%,
    rgba(30,21,14,.45) 70%,
    rgba(30,21,14,.65) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}
.kb-banner[data-kb-state="searching"]::after { opacity: 0; }

.kb-banner-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px;
  margin-top: auto; margin-bottom: 64px;
}

.kb-banner-title {
  display: flex; max-width: 100%;
  overflow: hidden;
  text-align: center;
  font-family: var(--headlines-font-family);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -.025em;
  height: auto;
  margin-top: 0; margin-bottom: 28px;
  opacity: 1;
  transition: opacity 500ms ease-in-out, height 500ms ease-in-out, margin 500ms ease-in-out;
}
.kb-banner-title-text { line-height: 1.1; }
.kb-banner-title-text em { color: var(--espresso); }

.kb-banner[data-kb-state="searching"] .kb-banner-title {
  height: 0; margin: 0; opacity: 0;
}
.kb-banner-title span { overflow: hidden; text-overflow: ellipsis; }

.kb-banner--dark-text { color: var(--ink); }
.kb-banner--light-text { color: var(--cream); }
.kb-banner--light-text .kb-banner-title-text em {
  color: var(--cream);
  border-bottom: 1px solid rgba(244,236,222,.4);
  padding-bottom: 2px;
}

/* Logo swap — dark page-bg shows the bright logo, light shows the default */
.kb-logo-bright { display: none; }
.kb-banner--light-text .kb-logo-default { display: none; }
.kb-banner--light-text .kb-logo-bright { display: block; }

.kb-banner[data-kb-state="searching"].kb-banner--light-text { color: var(--ink); }
.kb-banner[data-kb-state="searching"].kb-banner--light-text .kb-logo-default { display: block; }
.kb-banner[data-kb-state="searching"].kb-banner--light-text .kb-logo-bright { display: none; }
.kb-banner[data-kb-state="searching"].kb-banner--light-text .kb-auth-button {
  border-color: var(--pebble); color: var(--ink);
}

/* Search container width transition (homepage) */
.kb-search-container {
  position: relative; max-width: 100%;
  width: 560px;
  transition: width 500ms ease-in-out;
}
.kb-banner[data-kb-state="searching"] .kb-search-container { width: 1080px; }

/* ============================================================
   SEARCH INPUT
   ============================================================ */
.kb-search-icon {
  pointer-events: none;
  position: absolute; top: 0; bottom: 0; left: 0;
  display: flex; align-items: center; padding-left: 18px;
  color: var(--flint);
}
.kb-search-icon svg { width: 18px; height: 18px; }

.KnowledgeBaseSearchInput {
  font-family: var(--body-font-family);
  font-size: 15px;
  height: 52px;
  width: 100%;
  padding: 0 16px 0 48px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--pebble);
  outline: 0;
  background: var(--bone);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.KnowledgeBaseSearchInput:hover { border-color: var(--ash); }
.KnowledgeBaseSearchInput:focus {
  border-color: var(--espresso);
  box-shadow: var(--shadow-lg);
}
.KnowledgeBaseSearchInput::placeholder { color: var(--flint); }

/* Search results visibility — only show when banner is in searching state */
#kb-search-results { display: none; }
.kb-banner[data-kb-state="searching"] ~ .kb-content-wrapper #kb-search-results { display: block; }
.kb-banner[data-kb-state="searching"] ~ .kb-content-wrapper .kb-homepage-content { display: none; }

/* ============================================================
   HEADER (navbar partial)
   ============================================================ */
.kb-header {
  position: relative;
  display: flex; width: 100%;
  justify-content: center;
  padding: 22px 32px;
}
.kb-header-inner {
  display: flex;
  max-width: 1080px; flex: 1;
  align-items: center; justify-content: space-between;
  gap: 32px;
  margin: 0 auto;
}

.kb-header-logo { display: flex; align-items: center; flex-shrink: 0; }
.kb-header-logo img { height: 26px; flex-shrink: 0; }

.kb-header-nav {
  display: flex; align-items: center;
  gap: 24px;
}
.kb-header-link {
  font-family: var(--body-font-family);
  font-size: 13px; font-weight: 500;
  color: inherit; opacity: .72;
  transition: opacity var(--t-fast);
}
.kb-header-link:hover { opacity: 1; }

@media (max-width: 640px) {
  .kb-header-link { display: none; }
}

.kb-header-hamburger {
  display: none;
  align-items: center; justify-content: center;
  padding: 4px;
  border: 0; background: 0; appearance: none; -webkit-appearance: none;
  cursor: pointer; color: inherit; flex-shrink: 0;
}
@media (max-width: 640px) { .kb-header-hamburger { display: flex; } }

.kb-header-mobile-nav {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% - 4px); left: 24px; right: 24px;
  background: var(--bone);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  z-index: 50;
}
.kb-header--menu-open .kb-header-mobile-nav { display: flex; }
@media (min-width: 641px) { .kb-header--menu-open .kb-header-mobile-nav { display: none; } }

.kb-header-mobile-link {
  font-family: var(--body-font-family);
  font-size: 14px; font-weight: 500;
  padding: 10px 18px;
  color: var(--ink);
  border-radius: var(--radius-sm);
  margin: 0 4px;
  transition: background-color var(--t-fast);
}
.kb-header-mobile-link:hover { background-color: var(--stone); }

/* ============================================================
   AUTH BUTTON
   ============================================================ */
.kb-auth-wrapper { position: relative; }
.kb-auth-button {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(30,21,14,.20);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: 13px; line-height: 20px; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.kb-auth-button:hover { background: rgba(30,21,14,.06); }
.kb-banner--light-text .kb-auth-button {
  border-color: rgba(244,236,222,.25);
  color: var(--cream);
}
.kb-banner--light-text .kb-auth-button:hover { background: rgba(244,236,222,.10); }

.kb-auth-logout { gap: 8px; padding: 6px 12px 6px 10px; }
.kb-auth-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.kb-auth-chevron { flex-shrink: 0; }

.kb-auth-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  white-space: nowrap;
  padding: 4px 0;
  background: var(--bone);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.kb-auth-dropdown-item {
  display: block; width: 100%;
  padding: 8px 16px;
  border: 0; background: transparent;
  font-family: inherit; font-size: 13px;
  color: var(--ink); text-align: left; cursor: pointer;
}
.kb-auth-dropdown-item:hover { background: var(--stone); }

/* ============================================================
   LOCALE SWITCHER
   ============================================================ */
#kb-locale:empty { display: none; }
.kb-locale-wrapper { position: relative; }
.kb-locale-button {
  display: flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: transparent;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  color: inherit; cursor: pointer;
  transition: opacity var(--t-fast);
}
.kb-locale-button:hover { opacity: .7; }
.kb-locale-globe, .kb-locale-chevron { flex-shrink: 0; }

.kb-locale-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  white-space: nowrap; padding: 4px 0;
  max-height: 240px; overflow-y: auto;
  background: var(--bone);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.kb-locale-dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
  padding: 8px 16px;
  border: 0; background: transparent;
  font-family: inherit; font-size: 13px;
  color: var(--ink); text-align: left; cursor: pointer;
}
.kb-locale-dropdown-item:hover { background: var(--stone); }
.kb-locale-dropdown-item--active { font-weight: 500; color: var(--espresso); }

/* ============================================================
   COLLECTIONS GRID
   ============================================================ */
.kb-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.kb-collection-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "icon body"
    "icon body"
    "count count";
  column-gap: 20px; row-gap: 4px;
  padding: 24px 24px 18px;
  background: #FFFFFF;
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; color: inherit;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base),
    border-color var(--t-base);
}
.kb-collection-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--espresso-light);
}

.kb-collection-card-icon {
  grid-area: icon;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stone);
  border-radius: var(--radius-sm);
  color: var(--espresso);
  font-size: 22px; line-height: 1;
  align-self: start;
  overflow: hidden;
}
.kb-collection-card-icon svg { width: 22px; height: 22px; }
.kb-collection-card-icon .kb-collection-custom-icon {
  width: 28px; height: 28px; object-fit: contain;
}

.kb-collection-card-body {
  grid-area: body;
  display: flex; flex-direction: column;
  gap: 6px; min-width: 0; overflow: hidden;
}
.kb-collection-card-title {
  font-family: var(--headlines-font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-collection-card-description {
  font-family: var(--body-font-family);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--flint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.kb-collection-card-count {
  grid-area: count;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--stone);
  font-family: var(--body-font-family);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--ash);
  display: flex; align-items: center; justify-content: space-between;
}
.kb-collection-card-count::after {
  content: "→";
  color: var(--espresso);
  font-size: 14px; font-weight: 500;
  transition: transform var(--t-fast);
}
.kb-collection-card:hover .kb-collection-card-count::after { transform: translateX(4px); }

/* ============================================================
   POPULAR ARTICLES (homepage) + generic article list
   ============================================================ */
.kb-popular-articles {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.kb-popular-articles-title {
  font-family: var(--headlines-font-family);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 4px;
}

.kb-article-card {
  display: flex; align-items: center;
  padding: 18px 20px;
  background: #FFFFFF;
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; color: inherit;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base),
    border-color var(--t-base);
}
.kb-article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--espresso-light);
}
.kb-article-card-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stone);
  color: var(--espresso);
  border-radius: var(--radius-sm);
  margin-right: 14px;
}
.kb-article-card-icon svg { width: 16px; height: 16px; }
.kb-article-card-title {
  flex: 1;
  font-family: var(--body-font-family);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.kb-article-card-chevron {
  width: 16px; height: 16px;
  color: var(--ash);
  flex-shrink: 0;
  display: flex; align-items: center;
  font-size: 18px; font-weight: 400;
  transition: color var(--t-fast), transform var(--t-fast);
}
.kb-article-card:hover .kb-article-card-chevron {
  color: var(--espresso); transform: translateX(3px);
}

/* ============================================================
   HOMEPAGE WRAPPER
   ============================================================ */
.kb-homepage-content {
  display: flex; flex-direction: column;
  gap: 56px;
  margin-top: 8px;
}

/* ============================================================
   FOOTER (footer partial) — light bone, hairline top border
   ============================================================ */
.kb-footer { background: var(--bone); }

.kb-footer-divider {
  height: 1px; width: 100%; flex-shrink: 0;
  background: var(--pebble);
  margin-top: 80px;
}

.kb-footer-content {
  display: flex; width: 100%; justify-content: center;
  padding: 48px 32px 40px;
}
@media (max-width: 640px) { .kb-footer-content { padding-bottom: 56px; } }

.kb-footer-inner {
  display: flex;
  max-width: 1080px; flex: 1; flex-direction: column;
  gap: 40px;
  margin: 0 auto;
}

.kb-footer-sections {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 0;
}

.kb-footer-links-group {
  display: flex; flex-wrap: wrap;
  gap: 48px;
  font-size: 13.5px;
}

.kb-footer-section {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-right: 16px;
}
.kb-footer-section-title {
  font-family: var(--body-font-family);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 6px;
}
.kb-footer-section-links {
  display: flex; flex: 1; flex-direction: column; flex-wrap: wrap;
  gap: 12px;
}
.kb-footer-section-link {
  color: var(--flint);
  transition: color var(--t-fast);
  line-height: 1.4;
}
.kb-footer-section-link:hover {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}

.kb-footer-social-links { display: flex; gap: 16px; }
.kb-footer-social-link {
  color: var(--flint);
  transition: color var(--t-fast);
}
.kb-footer-social-link:hover { color: var(--ink); }

.kb-footer-bottom {
  display: flex; width: 100%;
  align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--stone);
}

.kb-footer-logo {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.kb-footer-logo img {
  height: 24px; flex-shrink: 0;
  border-radius: 0;
}

.kb-powered-by {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  color: var(--ash);
  transition: color var(--t-fast);
}
.kb-powered-by:hover { color: var(--flint); }
.kb-powered-by img { height: 12px; width: auto; opacity: .55; }
.kb-powered-by span { display: flex; align-items: center; gap: 2px; font-weight: 500; }

/* ============================================================
   SEARCH RESULTS
   ============================================================ */
.kb-search-input-wrapper { position: relative; }

.kb-search-results-list {
  display: flex; flex-direction: column;
  gap: 28px;
}

.kb-search-result-skeleton {
  height: 100px; width: 100%;
  background: var(--stone);
  border-radius: var(--radius-md);
  animation: kb-pulse 2s ease-in-out infinite;
}
@keyframes kb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.kb-search-result-item {
  display: flex; flex-direction: column;
  cursor: pointer; text-decoration: none; color: inherit;
  margin-inline: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pebble);
}
.kb-search-result-item:hover .kb-search-result-title { color: var(--espresso); }

.kb-search-result-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  font-size: 11.5px;
  margin-bottom: 6px;
  line-height: 1.4;
  color: var(--flint);
}
.kb-search-result-breadcrumbs svg {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--ash);
}
.kb-search-result-breadcrumb-segment {
  display: flex; align-items: center; gap: 4px;
}
.kb-search-result-breadcrumb-link {
  color: var(--ink); text-decoration: none;
}
.kb-search-result-breadcrumb-link:hover {
  border-bottom: 1px solid currentColor;
}
.kb-search-result-breadcrumb-favicon {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.kb-search-result-badge {
  border-radius: var(--radius-sm);
  background-color: var(--stone);
  padding: 2px 8px;
  font-size: 11px; font-weight: 500;
  color: var(--flint);
  line-height: 1.4;
}

.kb-search-result-title {
  font-family: var(--body-font-family);
  font-size: 17px; font-weight: 500;
  color: var(--ink);
  transition: color var(--t-base) ease-in-out;
  line-height: 1.4;
}
.kb-search-result-highlight {
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--flint);
  margin-top: 4px;
  font-size: 13.5px;
}
.kb-search-result-highlight em,
.kb-search-result-highlight mark,
.kb-search-result-highlight .highlight-result {
  font-style: normal;
  font-weight: 500;
  background-color: var(--cream);
  color: var(--espresso-deep);
  padding: 0 2px;
  border-radius: 2px;
}

.kb-search-no-results {
  padding: 32px 0;
  text-align: center;
  color: var(--flint);
}

/* ============================================================
   ASK AI synthesized response
   ============================================================ */
.kb-ask-ai {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  margin-inline: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pebble);
}
.kb-ask-ai-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ash);
}
.kb-ask-ai-header svg { width: 14px; height: 14px; flex-shrink: 0; }
.kb-ask-ai-body {
  overflow: hidden;
  transition: max-height var(--t-base) ease-in-out;
}
.kb-ask-ai-body--clamped {
  max-height: 124px;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.kb-ask-ai-title {
  font-family: var(--headlines-font-family);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -.015em;
}
.kb-ask-ai-response {
  line-height: 1.65;
  white-space: pre-line;
  color: var(--flint);
}

.kb-sources-chip-wrapper {
  display: inline-flex; margin-top: -2px;
  align-items: center; justify-content: center;
  height: 20px;
  padding-inline: 2px;
}
.kb-sources-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  font-size: 11px; line-height: 1; cursor: pointer;
  background: var(--stone);
  color: var(--flint);
  transition: background-color var(--t-fast);
}
.kb-sources-chip:hover { background: var(--pebble); color: var(--espresso); }

.kb-sources-popover {
  position: absolute; left: 0; top: 100%;
  z-index: 50;
  min-width: 400px; max-width: 535px;
  background: var(--bone);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex; flex-direction: column; gap: 0;
}
.kb-sources-popover-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.kb-sources-popover-row:hover { background: var(--stone); }
.kb-sources-popover-index {
  flex-shrink: 0; width: 16px; text-align: center;
  font-size: 12px; color: var(--ash);
}
.kb-sources-popover-title {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-sources-popover-meta {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ash);
}
.kb-sources-popover-domain { white-space: nowrap; }
.kb-sources-popover-icon, .kb-sources-popover-icon svg {
  width: 16px; height: 16px; flex-shrink: 0;
}
.kb-sources-popover-favicon {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: var(--radius-sm); object-fit: contain;
}

.kb-ask-ai-feedback {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px;
}
.kb-ask-ai-feedback-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 5px;
  border: 0; outline: 0; background: transparent;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--ash);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.kb-ask-ai-feedback-btn:hover { color: var(--espresso); background-color: var(--stone); }
.kb-ask-ai-feedback-btn svg { width: 14px; height: 14px; }
.kb-ask-ai-feedback-result {
  display: flex; align-items: center; justify-content: center;
  color: var(--espresso);
}
.kb-ask-ai-feedback-result svg { width: 14px; height: 14px; }
.kb-ask-ai-toggle {
  font-size: 13px; font-weight: 500;
  color: var(--espresso);
  background: 0; border: 0; cursor: pointer;
  padding: 0; text-align: left;
}
.kb-ask-ai-toggle:hover { border-bottom: 1px solid currentColor; }

/* Search results + filter wrapper */
.kb-search-results-wrapper {
  display: flex; flex-direction: column;
  gap: 24px;
}
@media (min-width: 640px) {
  .kb-search-results-wrapper { flex-direction: row; gap: 32px; }
  .kb-search-results-wrapper > .kb-search-results-list { flex: 1; min-width: 0; }
}

/* Search filter sidebar */
.kb-search-filter {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.kb-search-filter-heading {
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ash);
}
.kb-search-filter-section-title {
  font-family: var(--headlines-font-family);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
}
.kb-search-filter-checkboxes {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.kb-filter-checkbox-label {
  --unchecked-border-color: var(--pebble);
  --unchecked-hover-color: var(--stone);
  --checked-color: var(--espresso);
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
}
.kb-filter-checkbox-input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.kb-filter-checkbox-custom {
  width: 1rem; height: 1rem;
  flex-shrink: 0;
  border: 1px solid var(--unchecked-border-color);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: white; background-color: transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.kb-filter-checkbox-custom svg {
  width: 1rem; height: 1rem;
  opacity: 0;
  transition: opacity var(--t-fast) ease-in-out;
}
.kb-filter-checkbox-input:checked + .kb-filter-checkbox-custom {
  background-color: var(--checked-color);
  border-color: var(--checked-color);
}
.kb-filter-checkbox-input:checked + .kb-filter-checkbox-custom svg { opacity: 1; }
.kb-filter-checkbox-label:hover .kb-filter-checkbox-input:not(:checked) + .kb-filter-checkbox-custom {
  background-color: var(--unchecked-hover-color);
}
.kb-filter-checkbox-label:hover .kb-filter-checkbox-input:checked + .kb-filter-checkbox-custom {
  background-color: var(--espresso-dark);
  border-color: var(--espresso-dark);
}
.kb-filter-checkbox-content {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.kb-filter-checkbox-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-filter-icon {
  flex-shrink: 0; width: 20px; height: 20px;
  color: var(--flint);
}
.kb-filter-icon svg { width: 20px; height: 20px; }
.kb-filter-favicon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--radius-sm);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.kb-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--flint);
}
.kb-breadcrumb-link { color: var(--ink); text-decoration: none; }
.kb-breadcrumb-link:hover { border-bottom: 1px solid currentColor; }
.kb-breadcrumb-separator { color: var(--ash); font-size: 14px; }
.kb-breadcrumb-current { color: var(--flint); }

/* ============================================================
   ARTICLE BADGES (visibility flags)
   ============================================================ */
.kb-article-badges-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px;
}
.kb-article-badges { display: flex; align-items: center; gap: 6px; }
.kb-article-badge {
  border-radius: var(--radius-sm);
  background-color: var(--stone);
  padding: 3px 9px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--flint);
  line-height: 1.4;
}

/* ============================================================
   COLLECTION PAGE
   ============================================================ */
.kb-collection-page-content {
  display: flex; flex-direction: column;
  margin-top: 32px;
}
.kb-collection-page-header {
  display: flex; align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.kb-collection-page-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stone);
  border-radius: var(--radius-sm);
  color: var(--espresso);
}
.kb-collection-page-icon svg { width: 22px; height: 22px; }
.kb-collection-page-icon .kb-collection-custom-icon {
  width: 26px; height: 26px; object-fit: contain;
}
.kb-collection-page-title {
  font-family: var(--headlines-font-family);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.kb-collection-page-description {
  margin-top: 14px;
  color: var(--flint);
  line-height: 1.6;
  font-size: 16px;
  max-width: 720px;
  text-wrap: pretty;
}
.kb-collection-page-items {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.kb-collection-page-items .kb-collections-grid { margin-bottom: 16px; }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.kb-article-page-content {
  display: flex; flex-direction: column;
  margin-top: 32px;
}
.kb-article-layout {
  display: flex; gap: 64px;
  position: relative;
}
.kb-article-main {
  width: 100%; min-width: 0;
  max-width: 720px;
  margin: 0 auto;
}
.kb-article-header { margin-top: 20px; }

.kb-article-title {
  font-family: var(--headlines-font-family);
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.025em;
  word-break: break-word;
}
.kb-article-title em { font-style: normal; font-weight: 400; color: var(--espresso); }

.kb-article-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ash);
  letter-spacing: .02em;
}
.kb-article-edit-link {
  display: inline-flex; align-items: center;
  gap: 8px; margin-left: 4px;
}
.kb-article-edit-link > svg { width: 4px; height: 4px; flex-shrink: 0; }
.kb-article-edit-link a {
  font-weight: 500; color: var(--flint);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.kb-article-edit-link a:hover { color: var(--espresso); border-bottom: 1px solid currentColor; }
.kb-article-edit-link a svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Article body (prose) ---------- */
.kb-article-body {
  margin-top: 32px;
  line-height: 1.7;
  font-size: 16.5px;
  color: var(--ink);
  word-break: break-word;
}

.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3,
.kb-article-body .ProseMirror h1,
.kb-article-body .ProseMirror h2,
.kb-article-body .ProseMirror h3 {
  font-family: var(--headlines-font-family);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.015em;
}
.kb-article-body h1, .kb-article-body .ProseMirror h1 {
  font-size: 26px; line-height: 1.2;
  margin-top: 2.2rem; margin-bottom: 1rem;
}
.kb-article-body h2, .kb-article-body .ProseMirror h2 {
  font-size: 21px; line-height: 1.25;
  margin-top: 1.85rem; margin-bottom: .85rem;
}
.kb-article-body h3, .kb-article-body .ProseMirror h3 {
  font-size: 17px; line-height: 1.3;
  font-weight: 500;
  font-family: var(--body-font-family);
  margin-top: 1.55rem; margin-bottom: .65rem;
}

.kb-article-body p,
.kb-article-body .ProseMirror p {
  margin: .5rem 0;
  line-height: 1.7;
  font-size: 16.5px;
  color: var(--ink);
}
.kb-article-body .ProseMirror p:first-child { margin-top: 0; }

.kb-article-body a,
.kb-article-body .ProseMirror a {
  color: var(--text-link-color, var(--espresso));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.kb-article-body a:hover,
.kb-article-body .ProseMirror a:hover { color: var(--espresso-dark); }

.kb-article-body ul, .kb-article-body ol { padding-left: 1.5rem; margin: .65rem 0; }
.kb-article-body li { margin: .25rem 0; line-height: 1.7; }

.kb-article-body img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--radius-md);
  margin: 1.25rem 0;
}
.kb-article-body img[data-width="25%"] { width: 25%; }
.kb-article-body img[data-width="50%"] { width: 50%; }
.kb-article-body img[data-width="75%"] { width: 75%; }
.kb-article-body img[data-width="100%"] { width: 100%; }
.kb-article-body img[data-align="center"] { margin-left: auto; margin-right: auto; }
.kb-article-body img[data-align="left"] { margin-left: 0; margin-right: auto; }
.kb-article-body img[data-align="right"] { margin-left: auto; margin-right: 0; }

.kb-article-body pre {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 1.25rem 0;
  font-size: 13px;
  line-height: 1.65;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;
}
.kb-article-body code {
  background: var(--stone);
  color: var(--espresso-deep);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: .92em;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;
}
.kb-article-body pre code { background: none; padding: 0; border-radius: 0; color: inherit; }

.kb-article-body blockquote {
  border-left: 2px solid var(--espresso);
  padding-left: 20px;
  margin: 1.25rem 0;
  color: var(--flint);
  font-family: var(--headlines-font-family);
  font-size: 18px;
  line-height: 1.55;
}

.kb-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 14px;
}
.kb-article-body th, .kb-article-body td {
  border: 1px solid var(--pebble);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.kb-article-body th {
  background: var(--stone);
  font-weight: 600;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--flint);
}

.kb-article-body hr {
  border: 0;
  border-top: 1px solid var(--pebble);
  margin: 1.75rem 0;
}

/* ---------- Tiptap ProseMirror specifics ---------- */
.kb-article-body .ProseMirror { outline: none; }
.kb-article-body .ProseMirror > * { max-width: 720px; margin-block: .9rem; }

.kb-article-body .ProseMirror h1:hover::before,
.kb-article-body .ProseMirror h2:hover::before,
.kb-article-body .ProseMirror h3:hover::before {
  content: "#";
  position: absolute; left: -20px;
  color: var(--ash);
}
.kb-article-body .ProseMirror h1,
.kb-article-body .ProseMirror h2,
.kb-article-body .ProseMirror h3 { position: relative; cursor: pointer; }

.kb-article-body .ProseMirror img {
  display: block; height: auto;
  width: 100%; max-width: 100%;
  border-radius: var(--radius-md);
}
.kb-article-body .node-imageBlock button:not(dialog *) {
  display: block; width: 100%;
  background: 0; border: 0; padding: 0;
  cursor: zoom-in; text-align: inherit;
}
.kb-article-body dialog.dialog > section {
  width: fit-content; margin: auto;
  transform: translateY(calc(50vh - 50%));
}
.kb-article-body .kb-image-preview {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  display: inline-block;
}
.kb-article-body .kb-image-preview-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
}
.kb-article-body .kb-image-preview-close button {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: rgba(249,247,245,.92);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--flint);
  line-height: 1;
}
.kb-article-body .kb-image-preview-close button:hover { background: var(--bone); }
.kb-article-body .kb-image-preview-close button svg { width: 18px; height: 18px; }
.kb-article-body .kb-image-preview-img {
  width: auto; max-height: 80vh; max-width: 100%;
  object-fit: contain; margin: 0; border-radius: 0;
}
.kb-article-body .kb-image-wrapper[data-align="center"] { margin-left: auto; margin-right: auto; }
.kb-article-body .kb-image-wrapper[data-align="left"]   { margin-left: 0; margin-right: auto; }
.kb-article-body .kb-image-wrapper[data-align="right"]  { margin-left: auto; margin-right: 0; }
.kb-article-body .kb-image {
  display: block; width: 100%;
  margin: 0; overflow: hidden;
  border-radius: var(--radius-md);
}

.kb-article-body .ProseMirror figure { margin: 1.75rem 0; }
.kb-article-body .ProseMirror figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ash);
  font-style: normal;
}

.kb-article-body .ProseMirror iframe,
.kb-article-body .ProseMirror video,
.kb-article-body .kb-video {
  margin-block: 1.75rem;
  width: 100%;
  border-radius: var(--radius-md);
}
.kb-article-body .ProseMirror iframe,
.kb-article-body iframe.kb-video {
  aspect-ratio: 16 / 9; background-color: var(--ink);
}

.kb-article-body .ProseMirror ol { list-style-type: decimal; margin: .85rem 0; padding: 0 2rem; }
.kb-article-body .ProseMirror ul { list-style-type: disc;    margin: .85rem 0; padding: 0 2rem; }
.kb-article-body .ProseMirror ul li,
.kb-article-body .ProseMirror ol li { margin-top: 0; margin-bottom: .5rem; }
.kb-article-body .ProseMirror li ol { list-style-type: lower-alpha; }
.kb-article-body .ProseMirror li li ol { list-style-type: lower-roman; }
.kb-article-body .ProseMirror li ul { list-style-type: circle; }
.kb-article-body .ProseMirror li li ul { list-style-type: square; }

.kb-article-body .ProseMirror code {
  border-radius: var(--radius-sm);
  border: 1px solid var(--pebble);
  font-size: 13px;
  background-color: var(--stone);
  color: var(--espresso-deep);
  padding: 1px 5px;
}
.kb-article-body .ProseMirror pre {
  overflow-x: auto;
  white-space: pre;
  border-radius: var(--radius-md);
  background-color: var(--ink);
  border: 1px solid var(--charcoal);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.6;
  margin-block: 1.1rem;
  padding: 14px 16px;
}
.kb-article-body .ProseMirror pre code {
  border: 0; background: inherit; padding: 0;
  font-size: 13px; color: inherit; box-shadow: none;
}
.kb-article-body .ProseMirror .in-group pre { margin-top: 0; margin-bottom: 0; }
.kb-article-body .ProseMirror .with-tabs pre { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.kb-article-body .ProseMirror .with-line-numbers pre { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }

.kb-article-body .ProseMirror > .react-renderer { margin: 2rem 0; }
.kb-article-body .ProseMirror > .react-renderer:first-child { margin-top: 0; }

/* Code block group */
.kb-article-body .ProseMirror > .react-renderer.node-codeBlockGroup { margin: 1.1rem 0; }
.kb-article-body .ProseMirror .code-block-group { position: relative; }
.kb-article-body .ProseMirror .code-block-group .hidden { display: none !important; }
.kb-article-body .ProseMirror .code-block-group pre[data-hidden="true"] { display: none !important; }
.kb-article-body .ProseMirror .code-block-group > div:first-of-type:has(button) { display: none; }
.kb-article-body .ProseMirror .code-block-group > div[class*="flex"][class*="rounded-t"] {
  display: flex; flex-wrap: wrap; align-items: center;
  overflow: hidden;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  border: 1px solid var(--charcoal);
  border-bottom: 0;
  background-color: var(--charcoal);
}
.kb-article-body .ProseMirror .code-block-group > div[class*="flex"][class*="rounded-t"] button {
  padding: 7px 14px;
  font-size: 12px;
  color: var(--cream); opacity: .65;
  background: 0; border: 0; cursor: pointer; min-height: 36px;
}
.kb-article-body .ProseMirror .code-block-group > div[class*="flex"][class*="rounded-t"] button:hover {
  opacity: 1; background-color: rgba(244,236,222,.05);
}
.kb-article-body .ProseMirror .code-block-group > div[class*="flex"][class*="rounded-t"] button[class*="bg-gray-50"] {
  background-color: var(--ink); opacity: 1;
}
.kb-article-body .ProseMirror .code-block-group > div[class*="grid"] { display: grid; }
.kb-article-body .ProseMirror .code-block-group > div[class*="grid-cols"] { grid-template-columns: min-content 1fr; }
.kb-article-body .ProseMirror .code-block-group pre:has(> code[aria-hidden]) {
  position: relative; width: min-content;
  white-space: pre-wrap !important; display: flex; overflow: hidden;
  margin-top: 0; margin-bottom: 0;
  border-right: none;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  line-height: 1.6;
}
.kb-article-body .ProseMirror .code-block-group:has(> div[class*="rounded-t"]) pre:has(> code[aria-hidden]) {
  border-top: 0; border-top-left-radius: 0;
}
.kb-article-body .ProseMirror .code-block-group pre > code[aria-hidden] { visibility: hidden; }
.kb-article-body .ProseMirror .code-block-group pre > code[aria-hidden] + code {
  position: absolute; display: block; height: 100%;
  color: var(--ash);
  line-height: inherit;
}
.kb-article-body .ProseMirror .code-block-group > div[class*="grid"] > div[class*="relative"] {
  position: relative; min-width: 0;
}
.kb-article-body .ProseMirror .code-block-group > div[class*="grid"] > div[class*="relative"] > div[class*="absolute"] {
  position: absolute; top: 50%; right: 8px; z-index: 10;
  transform: translateY(-50%);
}

/* Tooltip (portal) */
.nexus-tooltip__content {
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--body-font-family);
  font-weight: 400;
  color: var(--bone);
  background: var(--ink);
  box-shadow: var(--shadow-md);
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 230px;
}

/* Code block copy button */
.kb-article-body .ProseMirror .code-block-group .button {
  --tertiary-alt-color: var(--cream);
  --tertiary-alt-icon-color: var(--ash);
  --tertiary-alt-hover-bg: rgba(244,236,222,.08);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer; outline: none;
  color: var(--tertiary-alt-color);
}
.kb-article-body .ProseMirror .code-block-group .button:hover { background-color: var(--tertiary-alt-hover-bg); }
.kb-article-body .ProseMirror .code-block-group .button svg {
  width: 14px; height: 14px; color: var(--tertiary-alt-icon-color);
}
.kb-article-body .ProseMirror .code-block-group .button.button--sm {
  height: 1.5rem; font-size: 12px; padding: 3px;
}
.kb-article-body .ProseMirror .code-block-group .button.button--icon {
  min-width: auto; aspect-ratio: 1 / 1;
}

/* ---------- Syntax highlighting — warm palette ---------- */
.kb-article-body .hljs { color: var(--cream); }
.kb-article-body .hljs-comment,
.kb-article-body .hljs-quote {
  color: var(--ash); font-style: normal; opacity: .8;
}
.kb-article-body .hljs-doctag,
.kb-article-body .hljs-keyword,
.kb-article-body .hljs-formula { color: #C39B7A; }
.kb-article-body .hljs-section,
.kb-article-body .hljs-name,
.kb-article-body .hljs-selector-tag,
.kb-article-body .hljs-deletion,
.kb-article-body .hljs-subst { color: #D9A05B; }
.kb-article-body .hljs-literal { color: #B9D49E; }
.kb-article-body .hljs-string,
.kb-article-body .hljs-regexp,
.kb-article-body .hljs-addition,
.kb-article-body .hljs-attribute,
.kb-article-body .hljs-meta .hljs-string { color: #B9D49E; }
.kb-article-body .hljs-attr,
.kb-article-body .hljs-variable,
.kb-article-body .hljs-template-variable,
.kb-article-body .hljs-type,
.kb-article-body .hljs-selector-class,
.kb-article-body .hljs-selector-attr,
.kb-article-body .hljs-selector-pseudo,
.kb-article-body .hljs-number { color: #E0BB80; }
.kb-article-body .hljs-symbol,
.kb-article-body .hljs-bullet,
.kb-article-body .hljs-link,
.kb-article-body .hljs-meta,
.kb-article-body .hljs-selector-id,
.kb-article-body .hljs-title { color: #B0C4A3; }
.kb-article-body .hljs-built_in,
.kb-article-body .hljs-title.class_,
.kb-article-body .hljs-class .hljs-title { color: #D9A05B; }
.kb-article-body .hljs-emphasis { font-style: normal; font-weight: 500; }
.kb-article-body .hljs-strong { font-weight: 700; }
.kb-article-body .hljs-link { text-decoration: underline; }
.kb-article-body .hljs-punctuation { color: var(--cream); }

/* File block */
.kb-article-body .ProseMirror > .react-renderer.node-fileBlock { margin: .65rem 0; }
.kb-article-body .ProseMirror .node-fileBlock a,
.kb-article-body-placeholder div[data-type="file-block"] a {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  color: var(--text-link-color, var(--espresso));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.kb-article-body .ProseMirror .node-fileBlock a:hover,
.kb-article-body-placeholder div[data-type="file-block"] a:hover { color: var(--espresso-dark); }
.kb-article-body .ProseMirror .node-fileBlock a::before,
.kb-article-body-placeholder div[data-type="file-block"] a::before {
  content: ""; display: inline-block;
  width: 16px; height: 16px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM19 20V4H5V20H19ZM7 6H11V10H7V6ZM7 12H17V14H7V12ZM7 16H17V18H7V16ZM13 7H17V9H13V7Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM19 20V4H5V20H19ZM7 6H11V10H7V6ZM7 12H17V14H7V12ZM7 16H17V18H7V16ZM13 7H17V9H13V7Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.kb-article-body-placeholder div[data-type="file-block"] { margin: .65rem 0; }

/* Callout — warm-toned variants */
.kb-article-body .EditorCallout,
.kb-article-body-placeholder div[data-type="callout"] {
  display: flex; gap: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--pebble);
  padding: 18px 20px;
  background-color: var(--stone);
  color: var(--ink);
}
.kb-article-body .EditorCallout[data-color="blue"],
.kb-article-body-placeholder div[data-type="callout"][data-color="blue"] {
  border-color: #C0C2C6; background-color: #ECEDEF; color: var(--slate-deep, #1A1E25);
}
.kb-article-body .EditorCallout[data-color="red"],
.kb-article-body-placeholder div[data-type="callout"][data-color="red"] {
  border-color: var(--espresso-light); background-color: var(--cream); color: var(--espresso-deep);
}
.kb-article-body .EditorCallout[data-color="orange"],
.kb-article-body-placeholder div[data-type="callout"][data-color="orange"] {
  border-color: var(--espresso-light); background-color: var(--cream); color: var(--espresso-deep);
}
.kb-article-body .EditorCallout[data-color="yellow"],
.kb-article-body-placeholder div[data-type="callout"][data-color="yellow"] {
  border-color: var(--pebble); background-color: var(--cream); color: var(--charcoal);
}
.kb-article-body .EditorCallout[data-color="green"],
.kb-article-body-placeholder div[data-type="callout"][data-color="green"] {
  border-color: #C1C4BE; background-color: #ECEEEA; color: #1E2219;
}
.kb-article-body .EditorCallout[data-color="indigo"],
.kb-article-body-placeholder div[data-type="callout"][data-color="indigo"] {
  border-color: var(--pebble); background-color: var(--stone); color: var(--charcoal);
}
.kb-article-body .EditorCallout[data-color="purple"],
.kb-article-body-placeholder div[data-type="callout"][data-color="purple"] {
  border-color: var(--pebble); background-color: var(--stone); color: var(--charcoal);
}
.kb-article-body .EditorCallout[data-color] .EditorCallout-content p,
.kb-article-body .EditorCallout[data-color] .EditorCallout-content blockquote,
.kb-article-body .EditorCallout[data-color] .EditorCallout-content li { color: inherit; }
.kb-article-body .EditorCallout-icon {
  flex-shrink: 0; margin-top: 3px;
  display: flex; align-items: flex-start;
  width: 18px; height: 18px;
}
.kb-article-body .EditorCallout-icon svg { width: 18px; height: 18px; }
.kb-article-body .EditorCallout-content { min-width: 0; flex: 1; }

/* Internal Note */
.kb-article-body .ProseMirror div[data-type="internalBlock"],
.kb-article-body-placeholder div[data-type="internalBlock"] {
  padding: 1rem; padding-top: 2.6rem;
  border-radius: var(--radius-md);
  position: relative;
  background-color: var(--cream);
  border: 1px solid var(--pebble);
}
.kb-article-body .ProseMirror div[data-type="internalBlock"]::before,
.kb-article-body-placeholder div[data-type="internalBlock"]::before {
  content: "Internal note";
  position: absolute; top: 1rem; left: 1rem;
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ash);
}

/* Blockquote node */
.kb-article-body .ProseMirror blockquote[data-type="blockquote"] {
  border-left: 2px solid var(--espresso);
  padding: 8px 20px;
  margin-block: 1.1rem;
  font-family: var(--headlines-font-family);
  color: var(--flint);
}

/* Horizontal rule */
.kb-article-body .ProseMirror [data-type="horizontalRule"] {
  margin: .85rem 0; padding: .5rem 0;
}
.kb-article-body .ProseMirror [data-type="horizontalRule"] hr {
  border: 0; border-top: 1px solid var(--pebble);
}

/* Table */
.kb-article-body .ProseMirror .tableWrapper {
  margin-block: 2rem; overflow-x: auto;
}
.kb-article-body .ProseMirror table {
  width: 100%; max-width: 720px;
  border-collapse: collapse;
  border-radius: var(--radius-sm);
  word-break: break-word;
}
.kb-article-body .ProseMirror table td,
.kb-article-body .ProseMirror table th {
  min-width: 100px;
  padding: 10px 14px;
  text-align: left; vertical-align: top;
  border: 1px solid var(--pebble);
}
.kb-article-body .ProseMirror table td p,
.kb-article-body .ProseMirror table th p { margin: 0; }
.kb-article-body .ProseMirror table th {
  font-weight: 600; background: var(--stone);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--flint);
}

/* Emoji */
.kb-article-body .ProseMirror span[data-type="emoji"] {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.kb-article-body .ProseMirror span[data-type="emoji"] > img {
  display: inline; width: 1em; vertical-align: text-top;
}

/* Cross-reference link */
.kb-article-body .ProseMirror a.relative-link > * {
  display: inline-flex; vertical-align: -0.15em; margin-right: 8px;
}
.kb-article-body .ProseMirror a.relative-link svg { width: 1em; height: 1em; }

/* Accordion (hydrated) */
.kb-article-body .ProseMirror .node-accordion_list > [data-node-view-wrapper] {
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #FFFFFF;
}
.kb-article-body .ProseMirror .pylon-rte-accordion {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  border-top: 1px solid var(--pebble);
  padding: 14px 16px;
}
.kb-article-body .ProseMirror .pylon-rte-accordion:first-child { border-top: 0; }
.kb-article-body .ProseMirror .pylon-rte-accordion [data-type="accordion_details"] {
  display: none; grid-column: 2;
}
.kb-article-body .ProseMirror .pylon-rte-accordion[data-open="true"] [data-type="accordion_details"] {
  display: block;
}
.kb-article-body .ProseMirror .pylon-rte-accordion p { margin: 0; }
.kb-article-body .ProseMirror .pylon-rte-accordion .node-accordion_summary {
  display: contents; font-weight: 500;
}
.kb-article-body .ProseMirror .pylon-rte-accordion .node-accordion_summary > div {
  display: contents;
}
.kb-article-body .ProseMirror .pylon-rte-accordion .node-accordion_summary button {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-right: 6px;
  border-radius: var(--radius-sm);
  border: 0; background: 0; cursor: pointer;
  flex-shrink: 0;
  color: var(--flint);
}
.kb-article-body .ProseMirror .pylon-rte-accordion .node-accordion_summary button:hover {
  background-color: var(--stone); color: var(--espresso);
}
.kb-article-body .ProseMirror .pylon-rte-accordion .node-accordion_summary button > div {
  transition: .2s ease transform;
  display: flex; align-items: center; justify-content: center;
}
.kb-article-body .ProseMirror .pylon-rte-accordion .node-accordion_summary button svg {
  width: 16px; height: 16px;
}
.kb-article-body .ProseMirror .pylon-rte-accordion[data-open="true"] .node-accordion_summary button > div {
  transform: rotate(90deg);
}

/* Accordion (SSR placeholder) */
.kb-article-body-placeholder div[data-type="accordion_list"] {
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
  margin-block: 1rem;
  background: #FFFFFF;
}
.kb-article-body-placeholder div[data-type="accordion"] {
  border-top: 1px solid var(--pebble);
}
.kb-article-body-placeholder div[data-type="accordion"]:first-child { border-top: 0; }
.kb-article-body-placeholder div[data-type="accordion_summary"] {
  padding: 14px 16px; font-weight: 500;
}
.kb-article-body-placeholder div[data-type="accordion_details"] { display: none; }

.kb-article-body .ProseMirror .ProseMirror-separator { display: inline; }

/* ============================================================
   ARTICLE SIDEBAR
   ============================================================ */
.kb-article-sidebar {
  position: sticky; top: 40px; align-self: flex-start;
  width: 280px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .kb-article-sidebar { display: none; }
  .kb-article-layout { gap: 0; }
}
.kb-article-sidebar:not(:has(.kb-toc-item, .kb-related-articles, .kb-related-issues)) {
  display: none;
}

/* TOC */
.kb-toc-item {
  display: block;
  padding: 7px 14px;
  border-left: 2px solid var(--stone);
  font-size: 13px;
  color: var(--flint);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-base) ease-in-out, border-color var(--t-base) ease-in-out;
  line-height: 1.45;
}
.kb-toc-item:hover {
  color: var(--ink); border-left-color: var(--ash);
}
.kb-toc-item.active {
  color: var(--ink);
  border-left-color: var(--espresso);
  font-weight: 500;
}

/* Related Articles */
.kb-related-articles {
  display: flex; flex-direction: column;
  background-color: var(--stone);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  border: 1px solid var(--pebble);
}
.kb-related-articles-title {
  font-family: var(--body-font-family);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 12px;
}
.kb-related-article-link {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--flint);
  text-decoration: none;
  line-height: 1.45;
}
.kb-related-article-link:hover {
  color: var(--espresso);
  border-bottom: 1px solid currentColor;
}
.kb-related-article-link:first-of-type { margin-top: 0; }

/* Related Issues */
.kb-related-issues {
  background-color: var(--stone);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  border: 1px solid var(--pebble);
}
.kb-related-issues-details { display: flex; flex-direction: column; }
.kb-related-issues-details summary { list-style: none; }
.kb-related-issues-details summary::-webkit-details-marker { display: none; }
.kb-related-issues-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.kb-related-issues-title-row {
  display: flex; align-items: center; gap: 6px;
}
.kb-related-issues-title {
  font-family: var(--body-font-family);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ash);
}
.kb-related-issues-chevron {
  flex-shrink: 0;
  color: var(--flint);
  transition: transform .2s ease;
  transform: rotate(-90deg);
}
.kb-related-issues-details[open] .kb-related-issues-chevron { transform: rotate(0deg); }
.kb-related-issues-badge {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px;
  color: var(--ash);
  white-space: nowrap;
}
.kb-related-issues-badge svg { flex-shrink: 0; }
.kb-related-issues-list {
  display: flex; flex-direction: column;
  gap: 12px; padding: 14px 0;
}
.kb-related-issue-card {
  display: flex; flex-direction: column;
  background: var(--bone);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.kb-related-issue-card-header {
  display: flex; align-items: flex-start;
  gap: 10px; padding-bottom: 6px;
}
.kb-related-issue-account-logo {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
}
.kb-related-issue-card-header-text {
  display: flex; flex-direction: column; min-width: 0;
}
.kb-related-issue-card-title-row {
  display: flex; align-items: center; gap: 4px;
}
.kb-related-issue-account-name {
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-related-issue-ticket-number {
  font-size: 12px; color: var(--ash); flex-shrink: 0;
}
.kb-related-issue-requester {
  font-size: 12px; color: var(--flint);
}
.kb-related-issue-body {
  font-size: 12px;
  color: var(--flint);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 1.45;
}
.kb-related-issue-subject { font-weight: 500; color: var(--ink); }
.kb-related-issue-closed {
  font-size: 11px;
  color: var(--ash);
  margin-top: auto; padding-top: 4px;
}
.kb-related-issues-view-all {
  font-size: 13px;
  color: var(--espresso);
  text-decoration: none;
  padding: 4px 0;
}
.kb-related-issues-view-all:hover { border-bottom: 1px solid currentColor; }

/* ============================================================
   FEEDBACK
   ============================================================ */
.kb-feedback {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
  padding: 28px 24px;
  background: var(--stone);
  border: 1px solid var(--pebble);
  border-radius: var(--radius-md);
}
.kb-feedback-title {
  font-family: var(--headlines-font-family);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
.kb-feedback-scores {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.kb-feedback-score {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  font-size: 26px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  padding: 0; padding-top: 2px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.kb-feedback-score:hover,
.kb-feedback-score.selected {
  background: var(--bone);
  border-color: var(--pebble);
}
.kb-feedback-form { width: 100%; max-width: 460px; margin-top: 10px; }
.kb-feedback-label {
  font-family: var(--body-font-family);
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 6px;
}
.kb-feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--pebble);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--bone);
  color: var(--ink);
  resize: vertical;
  min-height: 80px;
  outline: 0;
  transition: border-color var(--t-fast);
}
.kb-feedback-textarea:focus { border-color: var(--espresso); }
.kb-feedback-actions {
  display: flex; justify-content: flex-end;
  margin-top: 10px;
}
.kb-feedback-submit {
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  border: 0;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--bone);
  background: var(--espresso);
  cursor: pointer;
  transition: background var(--t-fast);
}
.kb-feedback-submit:hover { background: var(--espresso-dark); }
.kb-feedback-submit:active { background: var(--espresso-deep); }
.kb-feedback-submit:disabled { opacity: .55; cursor: not-allowed; }
.kb-feedback-thanks {
  font-size: 14px;
  color: var(--ink);
  text-align: center;
}

/* ============================================================
   404 / NOT FOUND
   ============================================================ */
.kb-not-found-message {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  margin-top: 96px;
}
.kb-not-found-title {
  font-family: var(--headlines-font-family);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.05;
}
.kb-not-found-description {
  font-size: 17px;
  color: var(--flint);
  max-width: 480px;
}

/* ============================================================
   ARTICLE BODY SSR / SKELETON
   ============================================================ */
.kb-article-body-placeholder {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.kb-article-body-skeleton {
  display: flex; flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}
.kb-article-skeleton-line {
  height: 16px; width: 100%;
  background: var(--stone);
  border-radius: var(--radius-sm);
  animation: kb-pulse 2s ease-in-out infinite;
}
.kb-article-skeleton-line--lg { height: 22px; width: 60%; }
.kb-article-skeleton-line--md { width: 80%; }
.kb-article-skeleton-line--sm { width: 45%; }
.kb-article-skeleton-gap { height: 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .kb-content-wrapper,
  .kb-collection-content-wrapper,
  .kb-article-content-wrapper,
  .kb-not-found-content-wrapper { padding: 0 20px 56px; }
  .kb-content-wrapper { padding-top: 40px; }
  .kb-header { padding: 16px 20px; }
  .kb-banner { height: 280px; min-height: 280px; }
  .kb-banner-content { margin-bottom: 40px; }
  .kb-collection-page-title,
  .kb-article-title { font-size: 30px; }
}