:root {
  --body-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --headlines-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --primaryColor: rgb(79, 70, 229);
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-base: #ffffff;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --kb-theme-table-cell-colors: 1;
}

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

body {
  font-family: var(--body-font-family);
  color: var(--neutral-900);
  background: var(--neutral-base);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Layout */

.kb-page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.kb-content-wrapper {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: center;
  padding: 24px;
  background: var(--neutral-base);
  margin-top: 4px;
}

.kb-collection-content-wrapper {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: center;
  padding: 0 24px 24px 24px;
  background: var(--neutral-base);
}

.kb-collection-content-wrapper #kb-search-results {
  margin-top: 24px;
}

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

/* Banner */

.kb-banner {
  position: relative;
  z-index: 1;
  height: 280px;
  min-height: 280px;
  transition:
    height 500ms ease-in-out,
    min-height 500ms ease-in-out;
}

.kb-banner[data-kb-state="searching"] {
  height: 128px;
  min-height: 128px;
}

.kb-banner-bg {
  position: absolute;
  inset: 0;
  overflow: clip;
  z-index: -1;
}

.kb-banner-bg-color {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 280px;
  overflow: clip;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition:
    height 500ms ease-in-out,
    opacity 500ms ease-in-out;
}

.kb-banner[data-kb-state="searching"] .kb-banner-bg-color {
  height: 128px;
  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(180px);
  opacity: 0.15;
  transition: opacity 500ms ease-in-out;
}

.kb-banner[data-kb-state="searching"] .kb-banner-bg-blur {
  opacity: 0;
}

.kb-banner-bg-image {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

.kb-banner[data-kb-state="searching"] .kb-banner-bg-image {
  opacity: 0;
}

.kb-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 62px;
}

.kb-banner-title {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  font-weight: 600;
  font-size: 36px;
  height: 54px;
  margin-top: 24px;
  margin-bottom: 16px;
  opacity: 1;
  transition:
    opacity 500ms ease-in-out,
    height 500ms ease-in-out,
    margin 500ms ease-in-out;
  font-family: var(--headlines-font-family);
}

.kb-banner-title-text {
  line-height: 1.5;
}

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

.kb-banner-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-banner--dark-text {
  color: var(--neutral-900);
}

.kb-banner--light-text {
  color: var(--neutral-base);
}

.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(--neutral-900);
}

.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(--neutral-200);
  color: var(--neutral-900);
}

.kb-search-container {
  position: relative;
  max-width: 100%;
  width: 512px;
  transition: width 500ms ease-in-out;
}

.kb-banner[data-kb-state="searching"] .kb-search-container {
  width: 1000px;
}

/* Search Input */

.kb-search-icon {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: var(--neutral-500);
}

.kb-search-icon svg {
  width: 20px;
  height: 20px;
}

.KnowledgeBaseSearchInput {
  font-size: 14px;
  height: 44px;
  width: 100%;
  padding-left: 38px;
  padding-right: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--neutral-base);
  font-family: var(--body-font-family);
  color: var(--neutral-900);
}

.KnowledgeBaseSearchInput:hover {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
}

.KnowledgeBaseSearchInput:focus {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
  border: 1px solid transparent;
  outline-offset: 0px;
  outline: 1px solid var(--primaryColor);
}

.KnowledgeBaseSearchInput::placeholder {
  color: var(--neutral-500);
}

/* Search results visibility */

#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 */

.kb-header {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 24px;
}

.kb-header-inner {
  display: flex;
  max-width: 1000px;
  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: 32px;
  flex-shrink: 0;
}

.kb-header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.kb-header-link {
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.kb-header-link:hover {
  opacity: 0.7;
}

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

  .kb-header-logo img {
    max-width: 100px;
    max-height: 32px;
    height: auto;
  }

  .kb-header-nav {
    gap: 16px;
  }
}

.kb-header-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: none;
  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(--neutral-base);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  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-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  color: var(--neutral-900);
  border-radius: 4px;
  margin: 0 4px;
  transition: background-color 0.15s;
}

.kb-header-mobile-link:hover {
  background-color: var(--neutral-100);
}

.kb-header--dark-text .kb-header-link {
  color: var(--neutral-900);
}

.kb-header--light-text .kb-header-link {
  color: var(--neutral-base);
}

/* Auth Button */

.kb-auth-wrapper {
  position: relative;
}

.kb-auth-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border: 1px solid rgba(23, 23, 23, 0.2);
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 0.15s;
}

.kb-auth-button:hover {
  background: rgba(229, 229, 229, 0.1);
}

.kb-banner--light-text .kb-auth-button {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--neutral-base);
}

.kb-auth-logout {
  gap: 8px;
  padding: 4px 12px 4px 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% + 4px);
  right: 0;
  white-space: nowrap;
  padding: 4px 0;
  background: var(--neutral-base);
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.kb-auth-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--neutral-900);
  text-align: left;
  cursor: pointer;
}

.kb-auth-dropdown-item:hover {
  background: var(--neutral-100);
}

/* 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: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}

.kb-locale-button:hover {
  opacity: 0.7;
}

.kb-locale-globe {
  flex-shrink: 0;
}

.kb-locale-chevron {
  flex-shrink: 0;
}

.kb-locale-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  white-space: nowrap;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--neutral-base);
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.kb-locale-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--neutral-900);
  text-align: left;
  cursor: pointer;
}

.kb-locale-dropdown-item:hover {
  background: var(--neutral-100);
}

.kb-locale-dropdown-item--active {
  font-weight: 500;
}

/* Collections Grid */

.kb-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.kb-collection-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  padding: 16px;
  transition: box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.kb-collection-card:hover {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
}

.kb-collection-card-icon {
  margin-bottom: 8px;
  flex-shrink: 0;
  color: var(--neutral-400);
  height: 24px;
}

.kb-collection-card-icon svg {
  width: 24px;
  height: 24px;
}

.kb-collection-card-icon .kb-collection-custom-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.kb-collection-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.kb-collection-card-title {
  font-family: var(--headlines-font-family);
  font-weight: 500;
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}

.kb-collection-card-description {
  font-size: 14px;
  color: var(--neutral-800);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 44px;
  line-height: calc(1.25 / 0.875);
}

.kb-collection-card-count {
  margin-top: 8px;
  font-size: 12px;
  color: var(--neutral-500);
  line-height: calc(1 / 0.75);
}

/* Popular Articles */

.kb-popular-articles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kb-popular-articles-title {
  font-family: var(--headlines-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
}

.kb-article-card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  padding: 16px;
  transition: box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.kb-article-card:hover {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

.kb-article-card-icon {
  flex-shrink: 0;
  color: var(--neutral-400);
  margin-right: 8px;
  height: 20px;
}

.kb-article-card-icon svg {
  width: 20px;
  height: 20px;
}

.kb-article-card-title {
  flex: 1;
  color: var(--neutral-900);
}

.kb-article-card-chevron {
  width: 16px;
  height: 16px;
  color: var(--neutral-600);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Footer */

.kb-footer {
  background: var(--neutral-base);
}

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

.kb-footer-content {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 24px 24px 48px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .kb-footer-content {
    padding-bottom: 60px;
  }
}

.kb-footer-inner {
  display: flex;
  max-width: 1000px;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  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: 32px;
  font-size: 14px;
}

.kb-footer-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-right: 32px;
}

.kb-footer-section-title {
  font-family: var(--headlines-font-family);
  font-weight: 500;
  color: var(--neutral-900);
  margin-bottom: 4px;
}

.kb-footer-section-links {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 16px;
}

.kb-footer-section-link {
  color: var(--neutral-600);
  transition: color 0.2s;
  line-height: calc(1.25 / 0.875);
}

.kb-footer-section-link:hover {
  color: var(--neutral-700);
}

.kb-footer-social-links {
  display: flex;
  gap: 16px;
}

.kb-footer-social-link {
  color: var(--neutral-600);
  transition: color 0.2s;
}

.kb-footer-social-link:hover {
  color: var(--neutral-700);
}

.kb-footer-bottom {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.kb-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.kb-footer-logo img {
  height: 32px;
  flex-shrink: 0;
  border-radius: 4px;
}

.kb-powered-by {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--slate-400);
  transition: color 0.2s;
}

.kb-powered-by:hover {
  color: var(--slate-500);
}

.kb-powered-by img {
  height: 14px;
  width: auto;
}

.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: 24px;
}

.kb-search-result-skeleton {
  height: 100px;
  width: 100%;
  background: var(--neutral-100);
  border-radius: 8px;
  animation: kb-pulse 2s ease-in-out infinite;
}

@keyframes kb-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

.kb-search-result-item:hover .kb-search-result-title {
  color: var(--neutral-900);
}

.kb-search-result-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  margin-bottom: 4px;
  line-height: calc(1 / 0.75);
}

.kb-search-result-breadcrumbs svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--neutral-500);
}

.kb-search-result-breadcrumb-segment {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kb-search-result-breadcrumb-segment svg {
  width: 14px;
  height: 14px;
}

.kb-search-result-breadcrumb-link {
  color: var(--neutral-900);
  text-decoration: none;
}

.kb-search-result-badge {
  border-radius: 2px;
  background-color: var(--neutral-200, #e5e5e5);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-800, #262626);
  line-height: calc(1 / 0.75);
}

.kb-search-result-breadcrumb-link:hover {
  text-decoration: underline;
}

.kb-search-result-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--neutral-800);
  transition: color 0.2s ease-in-out;
  line-height: 1.5;
}

.kb-search-result-highlight {
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kb-search-result-highlight em,
.kb-search-result-highlight mark,
.kb-search-result-highlight .highlight-result {
  font-style: normal;
  font-weight: 400;
  background-color: var(--blue-100);
}

.kb-search-result-breadcrumb-favicon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
}

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

/* Ask AI synthesized response */

.kb-ask-ai {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-inline: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--neutral-200);
}

.kb-ask-ai-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600);
}

.kb-ask-ai-header svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kb-ask-ai-body {
  overflow: hidden;
  transition: max-height 0.2s 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-weight: 600;
  font-size: 16px;
  color: var(--neutral-900);
  line-height: 1.5;
  margin-bottom: 4px;
}

.kb-ask-ai-response {
  line-height: 1.5;
  white-space: pre-line;
}

/* Sources chip + popover */

.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 4px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  background: var(--neutral-100);
  color: var(--neutral-600);
  transition: background-color 0.1s ease-in-out;
}

.kb-sources-chip:hover {
  background: var(--neutral-200);
}

.kb-sources-popover {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  min-width: 400px;
  max-width: 535px;
  background: var(--neutral-0, #fff);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kb-sources-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}

.kb-sources-popover-row:hover {
  background: var(--neutral-100);
}

.kb-sources-popover-index {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--neutral-500);
}

.kb-sources-popover-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-sources-popover-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--neutral-500);
}

.kb-sources-popover-domain {
  white-space: nowrap;
}

.kb-sources-popover-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.kb-sources-popover-icon svg {
  width: 16px;
  height: 16px;
}

.kb-sources-popover-favicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: contain;
}

.kb-ask-ai-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.kb-ask-ai-feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  outline: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--neutral-400);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}

.kb-ask-ai-feedback-btn:hover {
  color: var(--neutral-600);
  background-color: var(--neutral-100);
}

.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(--neutral-900);
}

.kb-ask-ai-feedback-result svg {
  width: 14px;
  height: 14px;
}

.kb-ask-ai-toggle {
  font-size: 14px;
  font-weight: 500;
  color: var(--primaryColor);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.kb-ask-ai-toggle:hover {
  text-decoration: underline;
}

/* Search results + filter wrapper */

.kb-search-results-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .kb-search-results-wrapper {
    flex-direction: row;
    gap: 16px;
  }

  .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: 8px;
}

.kb-search-filter-heading {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600);
}

.kb-search-filter-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  font-family: var(--headlines-font-family);
}

.kb-search-filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.kb-filter-checkbox-label {
  --unchecked-border-color: var(--neutral-400);
  --unchecked-hover-color: var(--neutral-100);
  --checked-color: oklch(
    from var(--checkboxColor, var(--primaryColor)) min(l, 0.5) max(c, 0.1) h
  );
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 14px;
  color: var(--neutral-900);
}

.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: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: transparent;
  transition:
    background-color 0.1s ease-in,
    border-color 0.1s ease-in;
}

.kb-filter-checkbox-custom svg {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity 0.1s 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: color-mix(in oklch, var(--checked-color), black 15%);
  border-color: color-mix(in oklch, var(--checked-color), black 15%);
}

.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(--neutral-500);
}

.kb-filter-icon svg {
  width: 20px;
  height: 20px;
}

.kb-filter-favicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 2px;
}

/* Breadcrumbs */

.kb-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: calc(1 / 0.75);
}

.kb-breadcrumb-link {
  color: var(--neutral-900);
  text-decoration: none;
}

.kb-breadcrumb-link:hover {
  text-decoration: underline;
}

.kb-breadcrumb-separator {
  color: var(--neutral-500);
  font-size: 14px;
}

.kb-breadcrumb-current {
  color: var(--neutral-500);
}

/* Article Badges */

.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: 2px;
  background-color: var(--neutral-200, #e5e5e5);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-800, #262626);
  line-height: calc(1 / 0.75);
}

/* Collection Page */

.kb-collection-page-content {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.kb-collection-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.kb-collection-page-icon {
  flex-shrink: 0;
  color: var(--neutral-400);
  height: 28px;
}

.kb-collection-page-icon svg {
  width: 28px;
  height: 28px;
}

.kb-collection-page-icon .kb-collection-custom-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.kb-collection-page-title {
  font-family: var(--headlines-font-family);
  font-size: 24px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.5;
}

.kb-collection-page-description {
  margin-top: 16px;
  color: var(--neutral-700);
  line-height: 1.5;
}

.kb-collection-page-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

/* Article Page */

.kb-article-content-wrapper {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: center;
  padding: 0 24px 24px 24px;
  background: var(--neutral-base);
}

.kb-article-content-wrapper #kb-search-results {
  margin-top: 24px;
}

.kb-article-page-content {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.kb-article-layout {
  display: flex;
  gap: 44px;
  position: relative;
}

.kb-article-main {
  width: 100%;
  min-width: 0;
  max-width: 640px;
  margin: 0 auto;
}

.kb-article-header {
  margin-top: 16px;
}

.kb-article-title {
  font-family: var(--headlines-font-family);
  font-size: 24px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.4;
  word-break: break-word;
}

.kb-article-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--neutral-500);
}

.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 svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kb-article-edit-link a {
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.kb-article-edit-link a:hover {
  text-decoration: underline;
}

.kb-article-body {
  margin-top: 24px;
  line-height: 1.6;
  font-size: 16px;
  color: var(--neutral-900);
  word-break: break-word;
}

.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3 {
  font-family: var(--headlines-font-family);
  font-weight: 600;
  color: var(--neutral-900);
  cursor: pointer;
}

.kb-article-body h1 {
  font-size: 20px;
  line-height: 28px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.kb-article-body h2 {
  font-size: 18px;
  line-height: 25px;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

.kb-article-body h3 {
  font-size: 16px;
  line-height: 22px;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.kb-article-body p {
  margin: 0.4rem 0;
  line-height: 24px;
}

.kb-article-body b,
.kb-article-body strong {
  font-weight: 550;
}

.kb-article-body a {
  color: var(--text-link-color, var(--primaryColor));
  cursor: pointer;
  text-decoration: none;
}

.kb-article-body a:hover {
  text-decoration: underline;
}

.kb-article-body ul,
.kb-article-body ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.kb-article-body li {
  margin: 0.25rem 0;
  line-height: 24px;
}

.kb-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 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(--neutral-100);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 14px;
  line-height: 1.5;
}

.kb-article-body code {
  background: var(--neutral-100);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 14px;
}

.kb-article-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.kb-article-body blockquote {
  border-left: 3px solid var(--neutral-200);
  padding-left: 16px;
  margin: 1rem 0;
  color: var(--neutral-600);
}

.kb-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 14px;
}

.kb-article-body th,
.kb-article-body td {
  border: 1px solid var(--neutral-200);
  padding: 8px 12px;
  text-align: left;
}

.kb-article-body th {
  background: var(--neutral-100);
  font-weight: 600;
}

.kb-article-body hr {
  border: none;
  border-top: 1px solid var(--neutral-200);
  margin: 1.5rem 0;
}

/* Tiptap Article Content */

.kb-article-body .ProseMirror {
  outline: none;
}

.kb-article-body .ProseMirror > * {
  max-width: 640px;
  margin-block: 0.75rem;
}

.kb-article-body .ProseMirror p {
  margin-block: 0.4rem;
  line-height: 24px;
  font-size: 16px;
  color: var(--neutral-900);
}

.kb-article-body .ProseMirror p:first-child {
  margin-top: 0;
}

.kb-article-body .ProseMirror h1 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--neutral-900);
}

.kb-article-body .ProseMirror h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  color: var(--neutral-900);
}

.kb-article-body .ProseMirror h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--neutral-900);
}

.kb-article-body .ProseMirror h1,
.kb-article-body .ProseMirror h2,
.kb-article-body .ProseMirror h3 {
  font-family: var(--headlines-font-family);
  cursor: pointer;
  position: relative;
}

.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(--neutral-400);
}

.kb-article-body .ProseMirror a {
  color: var(--text-link-color, var(--primaryColor));
  cursor: pointer;
  text-decoration: none;
}

.kb-article-body .ProseMirror a:hover {
  text-decoration: underline;
}

.kb-article-body .ProseMirror img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
}

.kb-article-body .node-imageBlock button:not(dialog *) {
  display: block;
  width: 100%;
  background: none;
  border: none;
  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: 0.5rem;
  display: inline-block;
}

.kb-article-body .kb-image-preview-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}

.kb-article-body .kb-image-preview-close button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--neutral-200);
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--neutral-700);
  line-height: 1;
}

.kb-article-body .kb-image-preview-close button:hover {
  background: rgba(255, 255, 255, 1);
}

.kb-article-body .kb-image-preview-close button div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.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: 4px;
}

.kb-article-body figure {
  margin: 1.5rem 0;
}

.kb-article-body figcaption {
  margin-top: 6px;
  font-size: 14px;
  color: var(--neutral-500);
  text-align: center;
}

.kb-article-body .ProseMirror iframe,
.kb-article-body .ProseMirror video,
.kb-article-body .kb-video,
.kb-article-body iframe[data-width],
.kb-article-body video[data-width] {
  display: block;
  margin-block: 1.5rem;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.kb-article-body iframe[data-width="25%"],
.kb-article-body video[data-width="25%"] {
  width: 25%;
}
.kb-article-body iframe[data-width="50%"],
.kb-article-body video[data-width="50%"] {
  width: 50%;
}
.kb-article-body iframe[data-width="75%"],
.kb-article-body video[data-width="75%"] {
  width: 75%;
}
.kb-article-body iframe[data-width="100%"],
.kb-article-body video[data-width="100%"] {
  width: 100%;
}

.kb-article-body iframe[data-align="center"],
.kb-article-body video[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}

.kb-article-body iframe[data-align="left"],
.kb-article-body video[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
}

.kb-article-body iframe[data-align="right"],
.kb-article-body video[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
}

.kb-article-body .ProseMirror iframe,
.kb-article-body iframe.kb-video,
.kb-article-body iframe[data-width] {
  aspect-ratio: 16 / 9;
  background-color: black;
}

.kb-article-body .ProseMirror ol {
  list-style-type: decimal;
  margin: 0.75rem 0;
  padding: 0 2rem;
}

.kb-article-body .ProseMirror ul {
  list-style-type: disc;
  margin: 0.75rem 0;
  padding: 0 2rem;
}

.kb-article-body .ProseMirror ul li,
.kb-article-body .ProseMirror ol li {
  margin-top: 0;
  margin-bottom: 0.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: 4px;
  border: 1px solid var(--neutral-200);
  font-size: 14px;
  background-color: var(--neutral-100);
  color: #dc2626;
  padding: 1px 3px;
}

.kb-article-body .ProseMirror pre {
  overflow-x: auto;
  white-space: pre;
  border-radius: 4px;
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  font-size: 12px;
  line-height: 1.5;
  margin-block: 0.75rem;
  padding: 0.5rem;
}

.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 pre code {
  border: none;
  background: inherit;
  padding: 0;
  font-size: 12px;
  color: inherit;
  box-shadow: none;
}

.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: 0.75rem 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[class*="flex"][class*="rounded-t"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid var(--neutral-200);
  border-bottom: none;
  background-color: var(--neutral-200);
}

.kb-article-body
  .ProseMirror
  .code-block-group
  > div[class*="flex"][class*="rounded-t"]
  button {
  padding: 6px 12px;
  font-size: 14px;
  color: var(--neutral-600);
  background: none;
  border: none;
  cursor: pointer;
  min-height: 36px;
}

.kb-article-body
  .ProseMirror
  .code-block-group
  > div[class*="flex"][class*="rounded-t"]
  button:hover {
  background-color: #d1d5db;
}

.kb-article-body
  .ProseMirror
  .code-block-group
  > div[class*="flex"][class*="rounded-t"]
  button[class*="bg-gray-50"] {
  background-color: var(--neutral-100);
}

.kb-article-body
  .ProseMirror
  .code-block-group
  > div[class*="flex"][class*="rounded-t"]
  button[class*="bg-gray-50"]:hover {
  background-color: var(--neutral-100);
}

.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.5;
}

.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(--neutral-500);
  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: 6px;
  right: 8px;
  z-index: 10;
}

/* Tooltip (rendered as a portal outside .kb-article-body) */

.nexus-tooltip__content {
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--body-font-family);
  font-weight: normal;
  color: white;
  background: rgba(28, 29, 47);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  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(--neutral-800);
  --tertiary-alt-icon-color: var(--neutral-500);
  --tertiary-alt-hover-bg: var(--neutral-200);
  --tertiary-alt-active-bg: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  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 (lowlight / highlight.js) */

.kb-article-body .hljs {
  color: #383a42;
}

.kb-article-body .hljs-comment,
.kb-article-body .hljs-quote {
  color: #a0a1a7;
  font-style: italic;
}

.kb-article-body .hljs-doctag,
.kb-article-body .hljs-keyword,
.kb-article-body .hljs-formula {
  color: #a626a4;
}

.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: #e45649;
}

.kb-article-body .hljs-literal {
  color: #0184bb;
}

.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: #50a14f;
}

.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: #986801;
}

.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: #4078f2;
}

.kb-article-body .hljs-built_in,
.kb-article-body .hljs-title.class_,
.kb-article-body .hljs-class .hljs-title {
  color: #c18401;
}

.kb-article-body .hljs-emphasis {
  font-style: italic;
}

.kb-article-body .hljs-strong {
  font-weight: bold;
}

.kb-article-body .hljs-link {
  text-decoration: underline;
}

.kb-article-body .hljs-punctuation {
  color: #383a42;
}

.kb-article-body .ProseMirror > .react-renderer.node-fileBlock {
  margin: 0.5rem 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: 4px;
  max-width: 100%;
  color: var(--text-link-color, var(--primaryColor));
  text-decoration: none;
}

.kb-article-body .ProseMirror .node-fileBlock a:hover,
.kb-article-body-placeholder div[data-type="file-block"] a:hover {
  text-decoration: underline;
}

.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: 0.5rem 0;
}

/* Callout */

.kb-article-body .EditorCallout {
  display: flex;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  padding: 16px;
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

.kb-article-body .EditorCallout[data-color="blue"] {
  border-color: #bfdbfe;
  background-color: rgba(219, 234, 254, 0.7);
  color: #1e3a5f;
}

.kb-article-body .EditorCallout[data-color="red"] {
  border-color: #fecaca;
  background-color: rgba(254, 226, 226, 0.7);
  color: #7f1d1d;
}

.kb-article-body .EditorCallout[data-color="orange"] {
  border-color: #fed7aa;
  background-color: rgba(255, 237, 213, 0.7);
  color: #7c2d12;
}

.kb-article-body .EditorCallout[data-color="yellow"] {
  border-color: #fde68a;
  background-color: rgba(254, 249, 195, 0.3);
  color: #713f12;
}

.kb-article-body .EditorCallout[data-color="green"] {
  border-color: #bbf7d0;
  background-color: rgba(220, 252, 231, 0.5);
  color: #14532d;
}

.kb-article-body .EditorCallout[data-color="indigo"] {
  border-color: #c7d2fe;
  background-color: rgba(224, 231, 255, 0.7);
  color: #312e81;
}

.kb-article-body .EditorCallout[data-color="purple"] {
  border-color: #e9d5ff;
  background-color: rgba(243, 232, 255, 0.7);
  color: #581c87;
}

.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: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.kb-article-body .EditorCallout-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.kb-article-body .EditorCallout-content {
  min-width: 0;
  flex: 1;
}

.kb-article-body
  .EditorCallout-content
  > [data-node-view-content-react]
  > :first-child,
.kb-article-body .EditorCallout-content > :first-child {
  margin-top: 0;
}

.kb-article-body
  .EditorCallout-content
  > [data-node-view-content-react]
  > :last-child,
.kb-article-body .EditorCallout-content > :last-child {
  margin-bottom: 0;
}

/* Callout SSR placeholder (before islands hydrate, renderHTML output has no .EditorCallout class).
   Scoped to .kb-article-body-placeholder so it does not style the TipTap NodeViewWrapper after hydration. */

.kb-article-body-placeholder div[data-type="callout"] {
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  padding: 16px;
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

.kb-article-body-placeholder div[data-type="callout"][data-color="blue"] {
  border-color: #bfdbfe;
  background-color: rgba(219, 234, 254, 0.7);
  color: #1e3a5f;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="red"] {
  border-color: #fecaca;
  background-color: rgba(254, 226, 226, 0.7);
  color: #7f1d1d;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="orange"] {
  border-color: #fed7aa;
  background-color: rgba(255, 237, 213, 0.7);
  color: #7c2d12;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="yellow"] {
  border-color: #fde68a;
  background-color: rgba(254, 249, 195, 0.3);
  color: #713f12;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="green"] {
  border-color: #bbf7d0;
  background-color: rgba(220, 252, 231, 0.5);
  color: #14532d;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="indigo"] {
  border-color: #c7d2fe;
  background-color: rgba(224, 231, 255, 0.7);
  color: #312e81;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="purple"] {
  border-color: #e9d5ff;
  background-color: rgba(243, 232, 255, 0.7);
  color: #581c87;
}

.kb-article-body-placeholder div[data-type="callout"] > :first-child {
  margin-top: 0;
}

/* Internal Note */

.kb-article-body .ProseMirror div[data-type="internalBlock"] {
  padding: 1rem;
  padding-top: 3rem;
  border-radius: 4px;
  position: relative;
  background-color: var(--blue-50);
}

.kb-article-body .ProseMirror div[data-type="internalBlock"]::before {
  content: "Internal Note";
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.875rem;
  color: var(--slate-400);
}

.kb-article-body-placeholder div[data-type="internalBlock"] {
  padding: 1rem;
  padding-top: 3rem;
  border-radius: 4px;
  position: relative;
  background-color: var(--blue-50);
}

.kb-article-body-placeholder div[data-type="internalBlock"]::before {
  content: "Internal Note";
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.875rem;
  color: var(--slate-400);
}

/* Blockquote */

.kb-article-body blockquote[data-type="blockquote"] {
  border-left: 4px solid var(--neutral-200);
  padding: 8px 16px;
  margin-block: 0.75rem;
}

/* Horizontal rule */

.kb-article-body [data-type="horizontalRule"] {
  margin: 1rem 0;
  padding: 1rem 0;
}

.kb-article-body [data-type="horizontalRule"] hr {
  border: none;
  border-top: 1px solid var(--neutral-200);
  margin: 0;
}

/* Table */

.kb-article-body .ProseMirror .tableWrapper {
  margin-block: 2rem;
  max-width: 640px;
  overflow-x: auto;
}

.kb-article-body .ProseMirror table,
.kb-article-body--ssr .kb-article-body-placeholder table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  border-radius: 4px;
  word-break: break-word;
  font-size: 16px;
  line-height: 24px;
}

.kb-article-body .ProseMirror table td,
.kb-article-body .ProseMirror table th,
.kb-article-body--ssr .kb-article-body-placeholder table td,
.kb-article-body--ssr .kb-article-body-placeholder table th {
  min-width: 100px;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--neutral-200);
}

.kb-article-body .ProseMirror table td p,
.kb-article-body .ProseMirror table th p,
.kb-article-body--ssr .kb-article-body-placeholder table td p,
.kb-article-body--ssr .kb-article-body-placeholder table th p {
  margin: 0;
}

.kb-article-body .ProseMirror table th,
.kb-article-body--ssr .kb-article-body-placeholder table th {
  font-weight: 600;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="slate"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="slate"] {
  background-color: #f1f5f9;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="red"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="red"] {
  background-color: #fee2e2;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="orange"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="orange"] {
  background-color: #ffedd5;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="yellow"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="yellow"] {
  background-color: #fef3c7;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="green"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="green"] {
  background-color: #d1fae5;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="blue"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="blue"] {
  background-color: #dbeafe;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="indigo"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="indigo"] {
  background-color: #e0e7ff;
}

.kb-article-body .ProseMirror table :is(td, th)[data-background-color="violet"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  table
  :is(td, th)[data-background-color="violet"] {
  background-color: #ede9fe;
}

/* 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;
}

/* Relative link (cross-reference to another article) */

.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 (post-hydration NodeView) */

/* Accordion list inherits margin from the generic .react-renderer rule (margin: 2rem 0). */

.kb-article-body .ProseMirror .node-accordion_list > [data-node-view-wrapper] {
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  overflow: hidden;
}

.kb-article-body .ProseMirror .pylon-rte-accordion {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  border-top: 1px solid var(--neutral-200);
  padding: 12px;
}

.kb-article-body .ProseMirror .pylon-rte-accordion:first-child {
  border-top: none;
}

.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: 4px;
  border-radius: 4px;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.kb-article-body
  .ProseMirror
  .pylon-rte-accordion
  .node-accordion_summary
  button:hover {
  background-color: var(--neutral-100);
}

.kb-article-body
  .ProseMirror
  .pylon-rte-accordion
  .node-accordion_summary
  button
  > div {
  transition: 0.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 (renderHTML output, before islands hydrate) */

.kb-article-body-placeholder div[data-type="accordion_list"] {
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  margin-block: 0.75rem;
  overflow: hidden;
}

.kb-article-body-placeholder div[data-type="accordion"] {
  border-top: 1px solid var(--neutral-200);
}

.kb-article-body-placeholder div[data-type="accordion"]:first-child {
  border-top: none;
}

.kb-article-body-placeholder div[data-type="accordion_summary"] {
  padding: 12px 16px;
  font-weight: 500;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  div[data-type="accordion_summary"] {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  padding: 12px;
  cursor: pointer;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  div[data-type="accordion_summary"]::before {
  content: "›";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: 0.2s ease transform;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  div[data-type="accordion_summary"]
  p {
  margin: 0;
}

.kb-article-body-placeholder div[data-type="accordion_details"] {
  display: none;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  div[data-type="accordion_details"] {
  grid-column: 2;
  padding: 0 12px 12px 40px;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  div[data-type="accordion"][data-open="true"]
  > div[data-type="accordion_details"] {
  display: block;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  div[data-type="accordion"][data-open="true"]
  > div[data-type="accordion_summary"]::before {
  transform: rotate(90deg);
}

/* ProseMirror separator */

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

/* Article Sidebar */

.kb-article-sidebar {
  position: sticky;
  top: 40px;
  align-self: flex-start;
  width: 300px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .kb-article-sidebar {
    display: none;
  }
}

.kb-article-sidebar:not(
  :has(
    .kb-toc-item,
    .kb-related-articles,
    .kb-related-issues,
    .kb-article-tags-section
  )
) {
  display: none;
}

/* Table of Contents */

.kb-toc-item {
  display: block;
  padding: 6px 0;
  border-left: 2px solid var(--neutral-200);
  font-size: 14px;
  color: var(--neutral-500);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  line-height: 1.4;
}

.kb-toc-item:hover {
  color: var(--neutral-800);
  border-left-color: var(--neutral-400);
}

.kb-toc-item.active {
  color: var(--neutral-900);
  border-left-color: var(--primaryColor);
}

/* Related Articles */

.kb-related-articles {
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-100);
  border-radius: 8px;
  padding: 18px 24px;
}

.kb-related-articles-title {
  font-family: var(--headlines-font-family);
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 22px;
}

.kb-related-article-link {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--neutral-600);
  text-decoration: none;
  line-height: 1.4;
}

.kb-related-article-link:hover {
  color: var(--neutral-900);
  text-decoration: underline;
}

/* Related Issues */

.kb-related-issues {
  background-color: var(--neutral-100);
  border-radius: 8px;
  padding: 16px 20px;
}

.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: 4px;
}

.kb-related-issues-title {
  font-family: var(--headlines-font-family);
  font-weight: 500;
  color: var(--neutral-900);
}

.kb-related-issues-chevron {
  flex-shrink: 0;
  color: var(--neutral-900);
  transition: transform 0.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: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
}

.kb-related-issues-badge svg {
  flex-shrink: 0;
}

.kb-related-issues-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}

.kb-related-issue-card {
  display: flex;
  flex-direction: column;
  background: var(--neutral-base);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kb-related-issue-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 6px;
}

.kb-related-issue-account-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  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(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-related-issue-ticket-number {
  font-size: 12px;
  color: var(--neutral-500);
  flex-shrink: 0;
}

.kb-related-issue-requester {
  font-size: 12px;
  color: var(--neutral-600);
}

.kb-related-issue-body {
  font-size: 12px;
  color: var(--neutral-600);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.kb-related-issue-subject {
  font-weight: 500;
}

.kb-related-issue-closed {
  font-size: 12px;
  color: var(--neutral-400);
  margin-top: auto;
  padding-top: 4px;
}

.kb-related-issues-view-all {
  font-size: 14px;
  color: var(--neutral-900);
  text-decoration: none;
  padding: 4px 0;
}

.kb-related-issues-view-all:hover {
  text-decoration: underline;
}

/* Article Tags */

.kb-article-tags-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kb-article-tags-title {
  font-family: var(--headlines-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.3;
}

.kb-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kb-article-tag {
  --tag-hue: 0;
  --tag-color: oklch(25% 0.09 var(--tag-hue));
  --tag-background-color: oklch(97% 0.015 var(--tag-hue));
  --tag-border-color: oklch(95% 0.02 var(--tag-hue));
  --tag-hover-background-color: oklch(95% 0.02 var(--tag-hue));
  --tag-hover-border-color: oklch(88% 0.03 var(--tag-hue));
  background-color: var(--tag-background-color);
  border: 1px solid var(--tag-border-color);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--tag-color);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 3px 6px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-article-tag[data-color="red"] {
  --tag-hue: 0;
}

.kb-article-tag[data-color="orange"] {
  --tag-hue: 45;
}

.kb-article-tag[data-color="yellow"] {
  --tag-hue: 90;
}

.kb-article-tag[data-color="green"] {
  --tag-hue: 135;
}

.kb-article-tag[data-color="cyan"] {
  --tag-hue: 180;
}

.kb-article-tag[data-color="blue"] {
  --tag-hue: 225;
}

.kb-article-tag[data-color="purple"] {
  --tag-hue: 285;
}

.kb-article-tag[data-color="magenta"] {
  --tag-hue: 320;
}

.kb-article-tag[data-color="gray"] {
  --tag-color: var(--neutral-900);
  --tag-background-color: var(--neutral-100);
  --tag-border-color: var(--neutral-200);
  --tag-hover-background-color: var(--neutral-200);
  --tag-hover-border-color: var(--neutral-400);
}

.kb-article-tag[data-color="base"] {
  --tag-color: var(--neutral-900);
  --tag-background-color: var(--neutral-base);
  --tag-border-color: var(--neutral-200);
  --tag-hover-background-color: var(--neutral-100);
  --tag-hover-border-color: var(--neutral-400);
}

.kb-article-tag:hover {
  background-color: var(--tag-hover-background-color);
  border-color: var(--tag-hover-border-color);
}

/* Feedback */

.kb-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 24px;
  background: var(--neutral-100);
  border-radius: 8px;
}

.kb-feedback-title {
  font-size: 14px;
  color: var(--neutral-900);
  text-align: center;
}

.kb-feedback-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.kb-feedback-score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 28px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  padding-top: 2px;
}

.kb-feedback-score:hover,
.kb-feedback-score.selected {
  background: var(--neutral-200);
}

.kb-feedback-form {
  width: 100%;
  max-width: 400px;
  margin-top: 8px;
}

.kb-feedback-label {
  font-size: 13px;
  color: var(--neutral-600);
  margin-bottom: 4px;
}

.kb-feedback-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  outline: none;
}

.kb-feedback-textarea:focus {
  border-color: var(--neutral-400);
}

.kb-feedback-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.kb-feedback-submit {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--primaryColor);
  cursor: pointer;
}

.kb-feedback-submit:hover {
  opacity: 0.9;
}

.kb-feedback-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kb-feedback-thanks {
  font-size: 14px;
  color: var(--neutral-900);
  text-align: center;
}

/* Not Found Page */

.kb-not-found-content-wrapper {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: center;
  padding: 0 24px 24px 24px;
  background: var(--neutral-base);
}

.kb-not-found-content-wrapper #kb-search-results {
  margin-top: 24px;
}

.kb-not-found-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 64px;
}

.kb-not-found-title {
  font-family: var(--headlines-font-family);
  font-size: 30px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 16px;
}

.kb-not-found-description {
  font-size: 18px;
  color: var(--neutral-500);
}

/* Hide SSR article HTML visually; keep in DOM for crawlers/SEO. */

.kb-article-body-placeholder {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.kb-article-body--ssr .kb-article-body-placeholder {
  position: static;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.kb-article-body--ssr .kb-article-body-skeleton {
  display: none;
}

.kb-article-body--ssr .kb-article-body-placeholder > * {
  max-width: 640px;
  margin-block: 0.75rem;
}

.kb-article-body--ssr .kb-article-body-placeholder > h1 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.kb-article-body--ssr .kb-article-body-placeholder > h2 {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

.kb-article-body--ssr .kb-article-body-placeholder > h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.kb-article-body--ssr .kb-article-body-placeholder > figure {
  margin-block: 1.5rem;
}

.kb-article-body--ssr .kb-article-body-placeholder figure > img {
  margin-block: 0;
}

.kb-article-body--ssr .kb-article-body-placeholder > img,
.kb-article-body--ssr .kb-article-body-placeholder > iframe,
.kb-article-body--ssr .kb-article-body-placeholder > video,
.kb-article-body--ssr .kb-article-body-placeholder > div[data-type="callout"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  > div[data-type="accordion_list"],
.kb-article-body--ssr
  .kb-article-body-placeholder
  > div[data-type="pdf-block"] {
  margin-block: 2rem;
}

.kb-article-body--ssr .kb-article-body-placeholder .tableWrapper {
  margin-block: 2rem;
  max-width: 640px;
  overflow-x: auto;
}

.kb-article-body--ssr
  .kb-article-body-placeholder
  > [data-type="horizontalRule"] {
  margin: 1rem 0;
}

.kb-article-body--ssr .kb-article-body-placeholder p {
  margin-block: 0.4rem;
  min-height: 24px;
}

.kb-article-body--ssr .kb-article-body-placeholder ol {
  list-style-type: decimal;
  margin: 0.75rem 0;
  padding: 0 2rem;
}

.kb-article-body--ssr .kb-article-body-placeholder ul {
  list-style-type: disc;
  margin: 0.75rem 0;
  padding: 0 2rem;
}

.kb-article-body--ssr .kb-article-body-placeholder ul li,
.kb-article-body--ssr .kb-article-body-placeholder ol li {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.kb-article-body--ssr .kb-article-body-placeholder li ol {
  list-style-type: lower-alpha;
}

.kb-article-body--ssr .kb-article-body-placeholder li li ol {
  list-style-type: lower-roman;
}

.kb-article-body--ssr .kb-article-body-placeholder li ul {
  list-style-type: circle;
}

.kb-article-body--ssr .kb-article-body-placeholder li li ul {
  list-style-type: square;
}

.kb-article-body--ssr .kb-article-body-placeholder > :first-child {
  margin-top: 0;
}

.kb-article-body--ssr .kb-article-body-placeholder img {
  cursor: zoom-in;
}

.kb-article-body--ssr .kb-article-body-placeholder a img {
  cursor: inherit;
}

/* Skeleton shown while TipTap hydrates */

.kb-article-body-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.kb-article-skeleton-line {
  height: 16px;
  width: 100%;
  background: var(--neutral-100);
  border-radius: 4px;
  animation: kb-pulse 2s ease-in-out infinite;
}

.kb-article-skeleton-line--lg {
  height: 20px;
  width: 60%;
}

.kb-article-skeleton-line--md {
  width: 80%;
}

.kb-article-skeleton-line--sm {
  width: 45%;
}

.kb-article-skeleton-gap {
  height: 8px;
}

/* Homepage content container */

.kb-homepage-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 6px;
}

.kb-sidebar-home {
  --neutral-base: white;
  --neutral-50: oklch(0.985 0 0);
  --neutral-100: oklch(0.97 0 0);
  --neutral-200: oklch(0.922 0 0);
  --neutral-400: oklch(0.708 0 0);
  --neutral-500: oklch(0.556 0 0);
  --neutral-600: oklch(0.439 0 0);
  --neutral-700: oklch(0.371 0 0);
  --neutral-800: oklch(0.269 0 0);
  --neutral-900: oklch(0.205 0 0);
  background: var(--neutral-base);
}

.kb-sidebar-home .kb-header {
  display: none;
}

.kb-sidebar-home .kb-footer {
  display: none;
}

.kb-sidebar-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
}

.kb-sidebar-nav {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: calc(100vh - 64px);
  padding: 20px 12px;
  border-right: 1px solid var(--neutral-200);
  background: var(--neutral-base);
}

.kb-sidebar-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
  min-width: 0;
  font-family: var(--headlines-font-family);
  font-weight: 600;
  color: var(--neutral-900);
}

.kb-sidebar-topbar-brand img {
  display: block;
  max-width: 100%;
  height: 28px;
  object-fit: contain;
  object-position: left center;
  border-radius: 6px;
}

.kb-sidebar-nav-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kb-sidebar-menu-button,
.kb-sidebar-close-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  background: var(--neutral-base);
  color: var(--neutral-700);
  cursor: pointer;
}

.kb-sidebar-menu-button:hover,
.kb-sidebar-close-button:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.kb-sidebar-menu-button svg,
.kb-sidebar-close-button svg {
  width: 18px;
  height: 18px;
}

.kb-sidebar-collections {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 6px;
}

.kb-sidebar-collection-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--neutral-600);
  font-size: 14px;
  font-weight: 500;
}

.kb-sidebar-collection-link:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.kb-sidebar-collection-link--active {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.kb-sidebar-collection-icon {
  display: flex;
  width: 16px;
  height: 16px;
  color: var(--neutral-400);
}

.kb-sidebar-collection-icon svg,
.kb-sidebar-collection-icon img {
  width: 16px;
  height: 16px;
}

.kb-sidebar-main {
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  background: var(--neutral-50);
}

.kb-sidebar-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  min-height: 64px;
  padding: 14px 24px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--neutral-200) 72%, transparent);
  background: color-mix(
    in srgb,
    var(--neutral-50) 92%,
    var(--neutral-base)
  );
  backdrop-filter: blur(14px);
}

.kb-sidebar-topbar-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
}

.kb-sidebar-topbar-link {
  color: var(--neutral-600);
  font-size: 14px;
  font-weight: 500;
}

.kb-sidebar-topbar-link:hover {
  color: var(--neutral-900);
}

.kb-sidebar-topbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.kb-sidebar-topbar-brand + .kb-sidebar-topbar-controls {
  margin-left: auto;
}

.kb-sidebar-topbar-controls > div {
  display: flex;
}

.kb-sidebar-main-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
  min-height: calc(100vh - 64px);
  padding: 32px 40px;
}

.kb-sidebar-main-inner > #kb-search {
  margin-bottom: 20px;
}

.kb-sidebar-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.kb-sidebar-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
}

.kb-sidebar-title {
  max-width: 720px;
  font-family: var(--headlines-font-family);
  font-size: 40px;
  line-height: 1.15;
  color: var(--neutral-900);
}

.kb-sidebar-home .kb-search-container {
  width: min(640px, 100%);
}

.kb-sidebar-home .KnowledgeBaseSearchInput {
  height: 48px;
  border-radius: 12px;
  background: var(--neutral-base);
}

.kb-sidebar-collection-page {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.kb-sidebar-home .kb-collection-card,
.kb-sidebar-home .kb-article-card {
  border-radius: 12px;
  background: var(--neutral-base);
}

.kb-sidebar-home .kb-article-body .EditorCallout:not([data-color]) {
  border-color: var(--neutral-200);
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

.kb-sidebar-home
  .kb-article-body-placeholder
  div[data-type="callout"]:not([data-color]) {
  border-color: var(--neutral-200);
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

.kb-sidebar-home .kb-article-sidebar {
  top: 104px;
  max-height: calc(100vh - 128px);
}

@media (max-width: 1100px) {
  .kb-sidebar-home .kb-article-sidebar {
    display: none;
  }
}

.kb-sidebar-home .kb-article-body h1,
.kb-sidebar-home .kb-article-body h2,
.kb-sidebar-home .kb-article-body h3,
.kb-sidebar-home .kb-article-body .ProseMirror h1,
.kb-sidebar-home .kb-article-body .ProseMirror h2,
.kb-sidebar-home .kb-article-body .ProseMirror h3 {
  scroll-margin-top: 88px;
}

.kb-sidebar-home #kb-locale:empty,
.kb-sidebar-home #kb-auth:empty {
  display: none;
}

.kb-sidebar-home .kb-locale-button,
.kb-sidebar-home .kb-auth-button {
  border-color: var(--neutral-200);
  color: var(--neutral-700);
  font-size: 13px;
}

.kb-sidebar-home .kb-auth-button {
  background: var(--neutral-base);
}

.kb-sidebar-home .kb-locale-button:hover {
  opacity: 1;
  color: var(--neutral-900);
}

.kb-sidebar-home .kb-auth-button:hover {
  background: var(--neutral-100);
}

.kb-sidebar-home .kb-auth-dropdown,
.kb-sidebar-home .kb-locale-dropdown {
  border: 1px solid var(--neutral-200);
  background: var(--neutral-base);
}

.kb-sidebar-content-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: auto;
  padding-top: 88px;
}

.kb-sidebar-content-footer::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--neutral-200);
}

.kb-sidebar-footer-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px 36px;
}

.kb-sidebar-footer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kb-sidebar-footer-section-title {
  font-family: var(--headlines-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}

.kb-sidebar-footer-section-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kb-sidebar-footer-section-link {
  color: var(--neutral-500);
  font-size: 13px;
  line-height: 1.35;
}

.kb-sidebar-footer-section-link:hover {
  color: var(--neutral-800);
}

.kb-sidebar-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 8px;
}

.kb-sidebar-social-links {
  display: flex;
  gap: 14px;
}

.kb-sidebar-social-link {
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--neutral-500);
}

.kb-sidebar-social-link:hover {
  color: var(--neutral-800);
}

.kb-sidebar-social-link svg {
  width: 18px;
  height: 18px;
}

.kb-sidebar-powered-by {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--neutral-400);
  font-size: 12px;
}

.kb-sidebar-powered-by:hover {
  color: var(--neutral-600);
}

.kb-sidebar-powered-by span {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
}

.kb-sidebar-powered-by svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 840px) {
  .kb-sidebar-shell {
    display: block;
  }

  .kb-sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: auto;
    padding: 20px;
    border-right: none;
    background: var(--neutral-base);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .kb-sidebar-home--sidebar-open .kb-sidebar-nav {
    transform: translateX(0);
  }

  .kb-sidebar-menu-button,
  .kb-sidebar-close-button {
    display: flex;
  }

  .kb-sidebar-nav-header {
    display: flex;
    justify-content: flex-end;
  }

  .kb-sidebar-topbar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 14px;
    padding: 12px 24px;
  }

  .kb-sidebar-topbar-brand {
    margin-right: auto;
  }

  .kb-sidebar-topbar-brand img {
    max-width: 100px;
    max-height: 28px;
    height: auto;
  }

  .kb-sidebar-topbar-links {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
  }

  .kb-sidebar-topbar-controls {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .kb-sidebar-main-inner {
    padding: 32px 24px;
  }

  .kb-sidebar-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   NASH BRAND OVERRIDES  -  APPEND to the bottom of Pylon's default theme
   styles.css. DO NOT replace the file.

   This is the ENTIRE Nash help-center theme. Pylon's stock sidebar-layout
   templates already render everything we want (sidebar collections nav,
   collection cards, sub-collections-as-cards, article body, TOC, related,
   feedback, footer), and the whole theme is driven by design tokens. So we
   ship NO custom templates: we only remap Pylon's tokens to the Nash ramp
   and add a few accent components, appended after Pylon's default CSS.

   HOW TO APPLY: Pylon > Settings > Knowledge Base > Custom themes > CSS tab.
   Leave the existing default CSS in place, scroll to the very bottom, and
   paste everything below. (If the CSS tab was emptied, click "Reset to
   default" first, then append.) Replacing the whole file drops Pylon's
   layout and the page renders oversized.

   Also set Developer docs / Portal as KB Links in Pylon settings (the topbar
   renders .KB.Links); no template edit needed.
   ========================================================================== */

/* Brand faces via @font-face, not the CSS import at-rule: this file is appended
   to the bottom of Pylon's default stylesheet, where an import at-rule would be
   ignored because it must precede every other rule. Blocks below are generated
   from Google Fonts' CSS2 endpoint; see the plan. */
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrodmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrMdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFg08vz7MhEIVVeA.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrgdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmhHkjko.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hostgrotesk/v5/co3BmWBnlCJ3U42vbbfdwMjZqljmw07ArmNO.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hostgrotesk/v5/co3BmWBnlCJ3U42vbbfdwMjZpFjmw07Arg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* brand type */
  --nash-font-sans: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --nash-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* text / ink (Nash blue ramp) */
  --neutral-900: #0B1F3A;  /* titles, headings, body ink   (was #171717) */
  --neutral-800: #314868;  /* secondary text, descriptions (was #262626) */
  --neutral-700: #314868;  /* callout body text            (was #404040) */
  --neutral-600: #5A7498;  /* blockquote text              (was #525252) */
  --neutral-500: #5A7498;  /* captions, article counts     (was #737373) */
  --neutral-400: #5A7498;  /* icon glyphs, muted           (was #a3a3a3) */
  /* surfaces / lines */
  --neutral-200: #B1C4DC;  /* borders, dividers            (was #e5e5e5) */
  --neutral-100: #E5EDF6;  /* panel bg: code, callouts, th (was #f5f5f5) */
  --neutral-base: #ffffff; /* page background (unchanged) */
  /* accent / links (were teal #08323c / generic #2563eb) */
  --primaryColor: #314868;
  --text-link-color: #314868;
  /* Nash chartreuse (accent only, never a fill) */
  --nash-char-100: #6CD800;
  /* Collection-page "framed table" tokens (Variant B). A hairline row divider
     that sits LIGHTER than the frame border (--neutral-200), matching the mock:
     strong frame, faint inner rules. And a row accent for the sub-collection
     icon + hover edge that is brand-legal on a WHITE surface: Blue 400, NOT
     chartreuse (brand rule -- never chartreuse on white). Dark mode flips the
     accent to chartreuse, where it sits on dark blue and is allowed. */
  --nash-row-divider: #DCE5F0;
  --nash-row-accent: #314868;   /* Blue 400 on light */
  /* Deepest ink and the active-panel tint, tokenised so dark mode can invert
     them (both were literals sprinkled across the rules below). */
  --nash-ink: #01051E;          /* Blue 600 */
  --nash-panel-active: #E5EDF6; /* Blue 100 */
  /* Subtle hover tint for sidebar/nav rows and the collapse toggle. Its own
     token (not --neutral-100) because the light value is lighter than the
     ramp's own #E5EDF6, and that light value must not change here. */
  --nash-hover-bg: #F8FAFC;
  --nash-card: #ffffff;    /* raised surface: cards, search box, table header */
  /* Callout palette. Set here (not inline in callout.py) so callouts follow
     light/dark mode. Light mode values. */
  --nash-callout-note-bg: #E6F1FB;      --nash-callout-note-border: #185FA5;
  --nash-callout-note-label: #0C447C;   --nash-callout-note-text: #042C53;
  --nash-callout-tip-bg: #EAF3DE;       --nash-callout-tip-border: #3B6D11;
  --nash-callout-tip-label: #27500A;    --nash-callout-tip-text: #173404;
  --nash-callout-warning-bg: #FAEEDA;   --nash-callout-warning-border: #854F0B;
  --nash-callout-warning-label: #633806;--nash-callout-warning-text: #412402;
  --nash-callout-important-bg: #FCEBEB; --nash-callout-important-border: #A32D2D;
  --nash-callout-important-label: #791F1F;--nash-callout-important-text: #501313;
}

body{ font-family: var(--nash-font-sans); }

/* Sticky topbar: the header stays pinned and only the main content scrolls.
   Pylon leaves the topbar in normal flow, so by default it scrolls away while
   the (already position:fixed) sidebar stays. z-index 20 keeps the header above
   scrolling content but below Pylon's mobile drawer (z-index 100), so the drawer
   still overlays the header when the hamburger menu is open. Pylon's topbar
   background is opaque, so content scrolls cleanly underneath.
   Also the positioning context for the chartreuse hairline below. */
.kb-sidebar-topbar{ position: sticky; top: 0; z-index: 20; }
.kb-sidebar-topbar::after{ content:""; position:absolute; left:0; bottom:0;
  width:64px; height:2px; background: var(--nash-char-100); }

/* Hero eyebrow: mono, uppercase, with a single chartreuse dot. */
.kb-sidebar-eyebrow{ font-family: var(--nash-font-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--neutral-500);
  display:inline-flex; align-items:center; gap:9px; }
.kb-sidebar-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%;
  background: var(--nash-char-100); box-shadow:0 0 0 3px rgba(108,216,0,.16); }

/* Sidebar collections nav: Nash "you are here" pill + hover. */
.kb-sidebar-collection-link{ transition: background .12s, color .12s; }
.kb-sidebar-collection-link:hover{ background:var(--nash-hover-bg); color:var(--neutral-900); }
.kb-sidebar-collection-link--active{ background:var(--nash-panel-active) !important;
  color:var(--neutral-900) !important; font-weight:600; }
.kb-sidebar-collection-icon{ color:var(--neutral-800); }

/* Collection / article cards (icons + count come from tokens; a touch more). */
.kb-collection-card-title,.kb-article-card-title{ color:var(--nash-ink); font-weight:650;
  letter-spacing:-.01em; }
.kb-collection-card-count{ font-family: var(--nash-font-mono);
  color:var(--neutral-800); }
.kb-sidebar-title,.kb-collection-page-title,.kb-popular-articles-title{ color:var(--nash-ink); }

/* --- Collection page: sharp framed table (verified vs Pylon markup) ----------
   The collection landing page renders direct articles (.kb-article-card) then a
   .kb-collections-grid of sub-collection cards. We reshape both into one flat,
   dense, hairline-ruled list -- an enterprise "table" surface, not soft cards.
   display:contents flattens the grid so its cards flow as rows in the frame.
   NOTE: Pylon's base .kb-collection-card and .kb-collection-card-body are
   flex-direction:column, so we MUST reset them to row here -- setting only
   display:flex leaves them stacked (icon over title over count = the skew). */
.kb-sidebar-home .kb-collection-page-items{ border:1px solid var(--neutral-200);
  border-radius:6px; overflow:hidden; background:var(--nash-card);
  gap:0; }  /* Pylon's base gap:16px banded the rows apart -- kill it so the
               frame reads as ONE contiguous table (hairline dividers, no gaps). */
.kb-sidebar-home .kb-collection-page-items .kb-collections-grid{ display:contents; }
/* Optional section-header row (injected by theme.js between the direct articles
   and the sub-collection rows on collections that have both; see LABELS map).
   Mono, uppercase, faint -- a table section rule, matching the mock's .B-sec. */
.kb-sidebar-home .kb-collection-page-items .nash-section-header{
  padding:7px 14px; font-family:var(--nash-font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--neutral-500);
  background:transparent; border-bottom:1px solid var(--nash-row-divider); }
.kb-sidebar-home .kb-collection-page-items .kb-article-card,
.kb-sidebar-home .kb-collection-page-items .kb-collection-card{
  display:flex; flex-direction:row; align-items:center; gap:12px; padding:10px 14px;
  border:0; border-bottom:1px solid var(--nash-row-divider); border-left:2px solid transparent;
  border-radius:0; background:transparent !important; box-shadow:none !important;
  transition:background .1s, border-left-color .1s; }
/* Hover: chartreuse left-edge in BOTH modes. On white this is deliberate and
   brand-legal -- a single-stroke accent line is on the allowed list; the banned
   case is a chartreuse icon *tint* on white, which is why the icon (above) uses
   Blue 400 in light instead. */
.kb-sidebar-home .kb-collection-page-items .kb-article-card:hover,
.kb-sidebar-home .kb-collection-page-items .kb-collection-card:hover{
  background:var(--nash-hover-bg) !important; border-left-color:var(--nash-char-100); }
.kb-sidebar-home .kb-collection-page-items > .kb-article-card:last-child,
.kb-sidebar-home .kb-collection-page-items .kb-collections-grid > .kb-collection-card:last-child{ border-bottom:0; }
/* No divider directly above a section header. The last grid card before the ref
   header already drops its border (rule above); this matches it for the concepts
   article that sits directly before the main header, so every section label has
   a clean top and its own underline -- consistent, no stray rule above. */
.kb-sidebar-home .kb-collection-page-items .kb-article-card:has(+ .nash-section-header){ border-bottom:0; }
/* icons: article muted, group in the row accent (Blue 400 on light -- NEVER
   chartreuse on white; flips to chartreuse only in dark mode, on dark blue).
   Every inner-element rule below is SCOPED to .kb-collection-page-items so the
   framed-table ROW styling stays on the collection page only. It must not leak
   onto the stock homepage grid or Popular Articles, whose cards use Pylon's
   default VERTICAL layout -- there a nowrap title truncates in favour of the
   inline description, and the ::after caret + count misalign. The curated
   homepage uses its own .nash-hp-* classes, so it is unaffected either way. */
.kb-sidebar-home .kb-collection-page-items .kb-article-card-icon{ color:var(--neutral-500); display:flex; flex:0 0 auto; }
.kb-sidebar-home .kb-collection-page-items .kb-article-card-icon svg{ width:15px; height:15px; }
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-icon{ color:var(--nash-row-accent); display:flex; flex:0 0 auto; margin:0;
  height:20px; align-items:center; }  /* match the article icon box so both rows are equal height */
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-icon svg{ width:15px; height:15px; }
/* article row: title fills, chevron trails */
.kb-sidebar-home .kb-collection-page-items .kb-article-card-title{ flex:1 1 auto; font-size:13.5px; }
.kb-sidebar-home .kb-collection-page-items .kb-article-card-chevron{ color:var(--neutral-500); font-size:15px; flex:0 0 auto; }
/* group row: inline title + description, mono count, trailing chevron */
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-body{ display:flex; flex-direction:row; align-items:baseline; gap:8px;
  flex:1 1 auto; min-width:0; }
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-title{ font-size:13.5px; white-space:nowrap; }
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-description{ color:var(--neutral-500); font-size:12.5px;
  font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* Pylon's base clamps this to a fixed 44px -webkit-box (2 lines), which
     ballooned the row and threw the icon out of line with the title. Undo it:
     one truncating line so the row is a single baseline. */
  display:block; -webkit-line-clamp:none; height:auto; line-height:1.4; }
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-description::before{ content:"\00b7 "; }
.kb-sidebar-home .kb-collection-page-items .kb-collection-card-count{ font-size:10.5px;
  color:var(--neutral-500); flex:0 0 auto; margin:0; }
  /* margin:0 undoes Pylon's base margin-top:8px (from the column-card layout),
     which dropped the count ~4px below the row center so it missed the caret. */
.kb-sidebar-home .kb-collection-page-items .kb-collection-card::after{ content:"\203a"; color:var(--neutral-500);
  font-size:15px; flex:0 0 auto; line-height:1; }

/* --- curated homepage regions (theme.js injects .nash-hp into .kb-homepage-content) ---
   Structure comes from the HOME config in theme.js; the look is the sharp
   card system: closed hairline boxes (6px), mono region eyebrows, section
   ledes, a releases feed, and an OUTBOUND developer band. Tokens carry
   light/dark; chartreuse appears only as a hover stroke and the eyebrow dot,
   never as a fill on white. */
.kb-sidebar-home .nash-hp-sect{ margin-top:48px; padding-top:26px;
  border-top:1px solid var(--neutral-200); }
.kb-sidebar-home .nash-hp-sect > h2{ font-size:26px; line-height:1.15; letter-spacing:-.02em;
  font-weight:600; color:var(--nash-ink); margin:0 0 4px; }
.kb-sidebar-home .nash-hp-lede{ color:var(--neutral-500); font-size:14.5px; line-height:22px;
  margin:0; max-width:74ch; }
.kb-sidebar-home .nash-hp-region{ margin-top:24px; }
.kb-sidebar-home .nash-hp-region > h3{ font-family:var(--nash-font-mono); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--neutral-500); font-weight:500; margin:0 0 12px; }

.kb-sidebar-home .nash-hp-cards{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:8px; }
.kb-sidebar-home .nash-hp-cards li a{ display:block; height:100%; padding:13px 15px; border-radius:6px;
  border:1px solid var(--neutral-200); background:var(--nash-card);
  transition:border-color .12s, background .12s, box-shadow .12s; }
.kb-sidebar-home .nash-hp-cards li a:hover{ background:var(--nash-hover-bg);
  border-color:var(--neutral-500); box-shadow:inset 2px 0 0 var(--nash-char-100); }
.kb-sidebar-home .nash-hp-cards .t{ font-weight:600; font-size:14px; letter-spacing:-.005em; color:var(--nash-ink); }
.kb-sidebar-home .nash-hp-cards .d{ display:block; font-weight:400; font-size:13px; line-height:19px;
  color:var(--neutral-500); margin-top:5px; }

.kb-sidebar-home .nash-hp-rel{ display:flex; gap:16px; align-items:baseline; padding:12px 0;
  border-bottom:1px solid var(--nash-row-divider); }
.kb-sidebar-home .nash-hp-rel:last-child{ border-bottom:0; }
.kb-sidebar-home .nash-hp-rel .date{ font-family:var(--nash-font-mono); font-size:11px;
  color:var(--neutral-500); flex:0 0 92px; }
.kb-sidebar-home .nash-hp-rel .t{ font-weight:600; color:var(--nash-ink); }
.kb-sidebar-home .nash-hp-rel .s{ color:var(--neutral-500); font-size:13.5px; display:block;
  margin-top:2px; line-height:20px; }
.kb-sidebar-home .nash-hp-allrel{ font-family:var(--nash-font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--neutral-500); margin-top:14px; display:inline-block; }

.kb-sidebar-home .nash-hp-dev{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.kb-sidebar-home .nash-hp-devlink{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px;
  border-radius:999px; border:1px solid var(--neutral-200); background:transparent;
  transition:background .12s, border-color .12s; }
.kb-sidebar-home .nash-hp-devlink:hover{ background:var(--nash-hover-bg); border-color:var(--neutral-500); }
.kb-sidebar-home .nash-hp-devlink .n{ font-weight:600; font-size:13px; color:var(--nash-ink); }
.kb-sidebar-home .nash-hp-devlink .s{ font-size:12px; color:var(--neutral-500); }
.kb-sidebar-home .nash-hp-devlink .ext{ color:var(--nash-row-accent); font-size:13px; line-height:1; }
.kb-sidebar-home .nash-hp-devcap{ margin-top:11px; font-family:var(--nash-font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--neutral-500); }

/* Article prose accents (body/link/TOC come mostly from tokens; pin a few).
   These route through --neutral-800 (not a literal) so dark mode's contrast
   actually applies: Pylon's own body-link rule sits at equal specificity, and
   a literal here would win over --text-link-color's dark override forever. */
.kb-article-title{ color:var(--nash-ink); }
.kb-article-body a,.kb-related-article-link{ color:var(--neutral-800); }
.kb-toc-item.active{ color:var(--nash-ink); border-left-color:var(--neutral-800); font-weight:500; }
.kb-related-articles-title,.kb-feedback-title{ color:var(--nash-ink); }

/* Wider article. Pylon caps the reading column at 640px, the content shell at
   1040px, and each prose block at 640px, which feels cramped beside the sidebar
   and the TOC rail. Raise the caps for a more generous reading measure. These
   are appended after Pylon's defaults, so equal-specificity wins (no !important).
   Dial 800px down to ~720 for a tighter line length, or up for wider. */
.kb-sidebar-main-inner{ max-width: 1240px; }
.kb-article-main{ max-width: 800px; }
.kb-article-body .ProseMirror > *,
.kb-article-body--ssr .kb-article-body-placeholder > *,
.kb-article-body .ProseMirror .tableWrapper,
.kb-article-body--ssr .kb-article-body-placeholder .tableWrapper{ max-width: 800px; }

/* Reading rhythm. Pylon's kb-islands.css sets a tight paragraph gap (~0.4em)
   that turns long concept pages into a wall of text. It loads AFTER this file,
   so equal specificity would lose; these selectors add one class-level
   (`--ssr .kb-article-body-placeholder`, `.ProseMirror`) so they out-specify
   Pylon's default and win with no !important. Vertical rhythm only; measure and
   font size are left to the rules above. Covers both the published SSR body and
   the in-editor ProseMirror body so previews match live. */
.kb-article-body--ssr .kb-article-body-placeholder > p,
.kb-article-body .ProseMirror > p{ margin-bottom: 1.15em; line-height: 1.62; }
.kb-article-body--ssr .kb-article-body-placeholder > ul,
.kb-article-body--ssr .kb-article-body-placeholder > ol,
.kb-article-body .ProseMirror > ul,
.kb-article-body .ProseMirror > ol{ margin-bottom: 1.15em; }
.kb-article-body--ssr .kb-article-body-placeholder > ul > li,
.kb-article-body--ssr .kb-article-body-placeholder > ol > li,
.kb-article-body .ProseMirror > ul > li,
.kb-article-body .ProseMirror > ol > li{ line-height: 1.62; margin-bottom: .4em; }
.kb-article-body--ssr .kb-article-body-placeholder > h2,
.kb-article-body .ProseMirror > h2{ margin-top: 2.2em; }
.kb-article-body--ssr .kb-article-body-placeholder > h3,
.kb-article-body .ProseMirror > h3{ margin-top: 1.8em; }

/* Collapsible sidebar (desktop). theme.js adds a .nash-sidebar-toggle button to
   the topbar; clicking it toggles .nash-collapsed on .kb-sidebar-home and
   persists in localStorage. Pylon's shell is a CSS grid (260px 1fr), so
   collapsing = zero the first column and clip the nav (keep it a grid item so
   the main column stays in place and fills the width). Below 841px Pylon uses
   its own hamburger, so the toggle is hidden and this has no effect there. */
.nash-sidebar-toggle{ display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--neutral-200); border-radius:9px;
  background:var(--neutral-base); color:var(--neutral-800); cursor:pointer;
  margin-right:8px; flex:0 0 auto; }
.nash-sidebar-toggle:hover{ background:var(--nash-hover-bg); }
.nash-sidebar-toggle svg{ width:18px; height:18px; }
@media (min-width:841px){
  .nash-sidebar-toggle{ display:inline-flex; }
  .kb-sidebar-home.nash-collapsed .kb-sidebar-shell{ grid-template-columns:0 minmax(0px,1fr); }
  .kb-sidebar-home.nash-collapsed .kb-sidebar-nav{ overflow:hidden; padding:0; border:0;
    opacity:0; pointer-events:none; }
  /* Let the article use the freed width when collapsed. Without this, collapsing
     just adds empty margin because the reading column stays capped. Dial 1040
     down for a tighter line length. */
  .kb-sidebar-home.nash-collapsed .kb-sidebar-main-inner{ max-width: none; }
  .kb-sidebar-home.nash-collapsed .kb-article-main{ max-width: 1040px; }
  .kb-sidebar-home.nash-collapsed .kb-article-body .ProseMirror > *,
  .kb-sidebar-home.nash-collapsed .kb-article-body--ssr .kb-article-body-placeholder > *,
  .kb-sidebar-home.nash-collapsed .kb-article-body .ProseMirror .tableWrapper,
  .kb-sidebar-home.nash-collapsed .kb-article-body--ssr .kb-article-body-placeholder .tableWrapper{ max-width: 1040px; }
}

/* System dark mode. Redefines ONLY tokens, so every rule above it inverts with it.
   Brand pairing rule: bright chartreuse (Chartreuse 50) on dark blues only. */
@media (prefers-color-scheme: dark) {
  :root {
    --neutral-base: #01051E;   /* Blue 600 canvas */
    --neutral-900: #FFFFFF;
    --neutral-800: #B1C4DC;
    --neutral-700: #B1C4DC;
    --neutral-600: #B1C4DC;
    --neutral-500: #B1C4DC;
    --neutral-400: #5A7498;
    --neutral-200: #314868;
    --neutral-100: #0B1F3A;
    /* Links and brand chrome stay on the blue ramp in dark mode. The canon
       bans chartreuse as body text or a link colour, and these two tokens feed
       ordinary link text in Pylon's base stylesheet. Chartreuse survives only
       in --nash-char-100 below, which the hairline and eyebrow dot use: the
       thin-accent-line and small-dot pattern the canon does allow. */
    --primaryColor: #B1C4DC;
    --text-link-color: #B1C4DC;
    --nash-char-100: #C9FF00;
    /* Row divider a touch lighter than the dark frame; row accent flips to
       chartreuse (on dark blue = allowed pairing). */
    --nash-row-divider: #22344F;
    --nash-row-accent: #C9FF00;
    --nash-ink: #FFFFFF;
    --nash-panel-active: #0B1F3A;
    --nash-hover-bg: #0B1F3A;
    --nash-card: #0B1F3A;
    --nash-callout-note-bg: #0B1F3A;      --nash-callout-note-border: #5A7498;
    --nash-callout-note-label: #B1C4DC;   --nash-callout-note-text: #E5EDF6;
    --nash-callout-tip-bg: #0B1F3A;       --nash-callout-tip-border: #6CD800;
    --nash-callout-tip-label: #C9FF00;    --nash-callout-tip-text: #E5EDF6;
    --nash-callout-warning-bg: #0B1F3A;   --nash-callout-warning-border: #854F0B;
    --nash-callout-warning-label: #FAEEDA;--nash-callout-warning-text: #E5EDF6;
    --nash-callout-important-bg: #0B1F3A; --nash-callout-important-border: #A32D2D;
    --nash-callout-important-label: #FCEBEB;--nash-callout-important-text: #E5EDF6;
  }

  /* Pylon re-declares the whole --neutral-* ramp SCOPED to .kb-sidebar-home
     (--neutral-base: white; --neutral-100: oklch(0.97 0 0); ... --neutral-900:
     oklch(0.205 0 0)), which shadows our :root dark values for everything inside
     the page: main, topbar, nav, card text, table header. Re-declare the ramp at
     the same scope so dark wins by source order (our sheet is appended last). One
     block flips every surface and text colour Pylon paints from these tokens. */
  .kb-sidebar-home {
    --neutral-base: #01051E;   /* body / nav / main canvas (Blue 600) */
    --neutral-50:   #01051E;   /* main reading surface; topbar mixes from this */
    --neutral-100:  #0B1F3A;   /* raised panel: code, callouts, table header */
    --neutral-200:  #314868;   /* borders, dividers */
    --neutral-400:  #5A7498;   /* muted glyphs, powered-by */
    --neutral-500:  #B1C4DC;   /* captions, counts, eyebrow */
    --neutral-600:  #B1C4DC;   /* secondary text, links */
    --neutral-700:  #B1C4DC;
    --neutral-800:  #B1C4DC;   /* card descriptions */
    --neutral-900:  #FFFFFF;   /* headings, titles */
    --nash-row-divider: #22344F;
    --nash-row-accent:  #C9FF00;
  }

  /* The uploaded wordmark is nash-wordmark-black.png; force it white on the dark
     topbar. brightness(0) collapses it to solid black, invert(1) flips to white. */
  .kb-sidebar-topbar-brand img { filter: brightness(0) invert(1); }
}

/* Print / PDF - Pylon ships no print rules, so exports render oversized and
   drop the (non-printing) backgrounds. Flatten to a clean document. */
/* --- Surfaces Pylon paints with literal light colours ------------------------
   The dark block above only redefines tokens, but Pylon's own stylesheet paints
   these surfaces with literal white (and an oklch near-white table header), so
   the token flip never reached them and dark mode showed white cards with white
   text. Route each through a token: byte-identical in light, inverted in dark.
   `!important` guards against Pylon's higher-specificity and React-island inline
   styles (the search box), so the flip is reliable in one pass. */
.kb-page-layout.kb-sidebar-home{ background: var(--neutral-base) !important; }
.kb-sidebar-home .kb-sidebar-nav{ background: var(--neutral-base) !important; }
.kb-sidebar-home .kb-article-card,
.kb-sidebar-home .kb-collection-card{ background: var(--nash-card) !important; }
.kb-sidebar-home .KnowledgeBaseSearchInput,
.kb-sidebar-home #kb-search input,
.kb-sidebar-home input[type="search"]{
  background: var(--nash-card) !important; color: var(--neutral-900) !important; }
.kb-sidebar-home .kb-sidebar-menu-button,
.kb-sidebar-home .kb-sidebar-close-button,
.kb-sidebar-home .nash-sidebar-toggle,
.kb-sidebar-home .kb-auth-button{ background: transparent !important; }
/* Article-body table: Pylon paints the header near-white (oklch) and the border
   grey; both fail on the dark canvas. */
.kb-article-body th{ background: var(--neutral-100) !important; }
.kb-article-body table,
.kb-article-body th,
.kb-article-body td{ border-color: var(--neutral-200) !important; }

@media print{
  /* Print ink is absolute, never tokenised: --neutral-900 becomes white in
     dark mode, which would print white text onto the white background
     forced on the line below. Paper has no colour scheme. */
  html,body{ background:#fff !important; color:#0B1F3A !important; }
  .kb-sidebar-topbar,.kb-sidebar-nav,.kb-sidebar-content-footer,
  #kb-search,#kb-search-results,.kb-article-sidebar,.kb-toc-item,
  .kb-feedback{ display:none !important; }
  .kb-sidebar-shell,.kb-sidebar-main,.kb-sidebar-main-inner,
  .kb-article-page-content,.kb-article-layout,.kb-article-main{
    display:block !important; max-width:100% !important; width:auto !important;
    margin:0 !important; padding:0 !important; }
  img{ max-width:100% !important; height:auto !important; }
  .kb-collection-card,.kb-article-card{ box-shadow:none !important; break-inside:avoid; }
  .kb-article-body h1,.kb-article-body h2,.kb-article-body h3{ break-after:avoid; }
  p,li,tr,img,pre,blockquote,.kb-collection-card{ break-inside:avoid; }
  .kb-article-body a{ color:#0B1F3A !important; }
}

/* ==========================================================================
   NESTED SIDEBAR NAV

   Pylon's stock sidebar lists top-level collections only. theme.js rebuilds
   .kb-sidebar-collections into a nested, expandable tree (.nash-nav); these
   rules style it. Parent rows toggle open in place (a subtle right-aligned
   chevron is the only affordance, so labels never shift the way a left caret
   column would); leaf rows navigate. The branch matching the current page
   auto-expands. If theme.js does not run, none of this applies and Pylon's
   flat sidebar stays. See theme.js for the DOM contract.
   ========================================================================== */
.nash-nav{ padding:6px 0; }
.nash-nav .nash-row{ display:flex; align-items:center; }
.nash-nav a.nash-link{ flex:1; display:flex; align-items:center; gap:10px;
  margin:1px 6px; padding:7px 10px; border-radius:8px; color:var(--neutral-800);
  text-decoration:none; font-size:14px; line-height:1.2;
  transition:background .12s, color .12s; }
.nash-nav a.nash-link:hover{ background:var(--nash-hover-bg); color:var(--neutral-900); }
.nash-nav a.nash-link.nash-active{ background:var(--nash-panel-active); color:var(--neutral-900); font-weight:600; }
.nash-nav .kb-sidebar-collection-icon,
.nash-nav .kb-sidebar-collection-icon svg{ width:18px; height:18px; color:var(--neutral-800); flex:0 0 auto; }

/* Children are hidden until their group is open. A display swap (not a
   max-height animation) so deep, multi-open legacy trees never clip. */
.nash-nav .nash-children{ display:none; }
.nash-nav .nash-group.open > .nash-children{ display:block; }

/* Disclosure affordance: a faint chevron pinned to the right of PARENT rows
   only, so it never pushes the label. Rotates when the group is open. */
.nash-nav a.nash-link .nash-expand{ margin-left:auto; display:none;
  align-items:center; flex:0 0 auto; padding-left:8px; color:#93A7C4; }
.nash-nav .nash-group.is-parent > .nash-row > a.nash-link .nash-expand{ display:inline-flex; }
.nash-nav a.nash-link .nash-expand svg{ width:14px; height:14px; transition:transform .15s; }
.nash-nav .nash-group.is-parent.open > .nash-row > a.nash-link .nash-expand svg{ transform:rotate(90deg); }

/* Indentation rails per depth. The active nested row gets the chartreuse
   rail (accent only, never a fill). */
.nash-nav .nash-d1 > .nash-row > a.nash-link{ margin-left:16px; padding-left:14px;
  border-left:2px solid var(--nash-panel-active); border-radius:0 8px 8px 0; }
.nash-nav .nash-d2 > .nash-row > a.nash-link{ margin-left:30px; padding-left:14px;
  border-left:2px solid var(--nash-panel-active); border-radius:0 8px 8px 0; font-size:13px; }
/* The object spine nests one level deeper than the old Configure tree:
   Platform(d0) > object(d1) > task sub-collection(d2) > task article(d3). Without
   a d3 rail the deepest leaves fell flush-left. d4 is defensive headroom. */
.nash-nav .nash-d3 > .nash-row > a.nash-link{ margin-left:44px; padding-left:14px;
  border-left:2px solid var(--nash-panel-active); border-radius:0 8px 8px 0; font-size:13px; }
.nash-nav .nash-d4 > .nash-row > a.nash-link{ margin-left:58px; padding-left:14px;
  border-left:2px solid var(--nash-panel-active); border-radius:0 8px 8px 0; font-size:13px; }
.nash-nav .nash-d1 > .nash-row > a.nash-link.nash-active,
.nash-nav .nash-d2 > .nash-row > a.nash-link.nash-active,
.nash-nav .nash-d3 > .nash-row > a.nash-link.nash-active,
.nash-nav .nash-d4 > .nash-row > a.nash-link.nash-active{ border-left-color:var(--nash-char-100); }
/* Article leaves in the nested nav: lighter than a collection row, no chevron
   column, and the chartreuse rail only when the leaf is the current page. */
.nash-nav .nash-leaf > .nash-row > a.nash-link{ font-weight:400; color:var(--neutral-800); }
.nash-nav .nash-leaf > .nash-row > a.nash-link.nash-active{ font-weight:600;
  color:var(--nash-ink); border-left-color:var(--nash-char-100); }

/* Article prev/next navigation (theme.js appends .nash-prevnext after the article
   body). Two cards; a lone link keeps its side via a flex spacer. Tokens flip in
   dark mode, so it themes automatically. */
.nash-prevnext{ display:flex; gap:12px; margin-top:44px; padding-top:26px;
  border-top:1px solid var(--neutral-200); }
.nash-prevnext .nash-pn, .nash-prevnext .nash-pn-spacer{ flex:1 1 0; min-width:0; }
.nash-prevnext a.nash-pn{ display:block; padding:14px 16px; border:1px solid var(--neutral-200);
  border-radius:12px; color:inherit; text-decoration:none; }
.nash-prevnext a.nash-pn:hover{ border-color:var(--neutral-800); background:var(--nash-hover-bg); }
.nash-prevnext .nash-pn-next{ text-align:right; }
.nash-prevnext .nash-pn-dir{ display:block; font-family:var(--nash-font-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--neutral-500); }
.nash-prevnext .nash-pn-title{ display:block; font-weight:550; margin-top:4px;
  color:var(--neutral-900); line-height:1.3; }
.nash-prevnext .nash-pn-prev .nash-pn-dir::before{ content:"\2190  "; }
.nash-prevnext .nash-pn-next .nash-pn-dir::after{ content:"  \2192"; }

/* Theme-paired diagram figures. nash-help's diagram/image pipeline emits a
   light + dark <img> for any diagram that has a `<name>.dark.png` sibling
   (Pylon strips <picture>'s <source>, but keeps <img>+class), and this toggle
   shows the variant matching the reader's colour scheme. Both variants are
   transparent PNGs with theme-coloured strokes, so a diagram floats on the page
   with no background card in either theme. If this rule isn't live yet, both
   variants show (degraded, not broken). Pylon's default `.kb-article-body img`
   already forces `display:block` (specificity 0,1,1), so the toggle MUST
   out-specify it: scope to `.kb-article-body img.nash-fig-*` (0,2,1) and match
   its `block` for the shown variant. A bare `.nash-fig-*` class (0,1,0) loses
   and both variants render. */
.nash-fig-light, .nash-fig-dark{ max-width:100%; height:auto; }
.kb-article-body img.nash-fig-dark{ display:none; }
@media (prefers-color-scheme: dark){
  .kb-article-body img.nash-fig-light{ display:none; }
  .kb-article-body img.nash-fig-dark{ display:block; }
}