@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --body-font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  --headlines-font-family: "DM Sans", 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;
}

*,
*::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;
  overflow: clip;
  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-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 {
  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--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: 24px;
  line-height: 32px;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

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

.kb-article-body h4 {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--headlines-font-family);
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.kb-h4-anchor {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-300);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.kb-article-body h4:hover .kb-h4-anchor {
  opacity: 1;
  color: var(--neutral-500);
}

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

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

.kb-article-body a:hover {
  opacity: 0.8;
}

.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: 8px;
  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: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  color: var(--neutral-900);
}

.kb-article-body .ProseMirror h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  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 .ProseMirror figure {
  margin: 1.5rem 0;
}

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

.kb-article-body .ProseMirror iframe,
.kb-article-body .ProseMirror video,
.kb-article-body .kb-video {
  margin-block: 1.5rem;
  width: 100%;
  border-radius: 4px;
}

.kb-article-body .ProseMirror iframe,
.kb-article-body iframe.kb-video {
  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:first-of-type:has(button) {
  display: none;
}

.kb-article-body
  .ProseMirror
  .code-block-group
  > div[class*="flex"][class*="rounded-t"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
  border-top-left-radius: 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: 50%;
  right: 8px;
  z-index: 10;
  transform: translateY(-50%);
}

/* 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: flex-start;
  width: 18px;
  height: 18px;
}

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

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

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

/* 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 .ProseMirror blockquote[data-type="blockquote"] {
  border-left: 4px solid var(--neutral-200);
  padding: 8px 16px;
  margin-block: 0.75rem;
}

/* Horizontal rule */

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

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

/* Table */

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

.kb-article-body .ProseMirror table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  border-radius: 4px;
  word-break: break-word;
}

.kb-article-body .ProseMirror table td,
.kb-article-body .ProseMirror 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 {
  margin: 0;
}

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

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

.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-placeholder div[data-type="accordion_details"] {
  display: none;
}

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

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

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

/* ============================================================
   3-COLUMN ARTICLE PAGE — CSS ADDITIONS
   Append these rules to the bottom of the existing stylesheet.
   ============================================================ */

/* Widen the content container on article pages to fit 3 columns */
.kb-article-content-wrapper .kb-content {
  max-width: 1600px !important;
}

/* Add even outer breathing room on both sides */
.kb-article-content-wrapper {
  padding-left: 40px;
  padding-right: 40px;
}

/* ── 3-column grid layout ──
   display and grid-template-columns use !important to beat Pylon's
   injected flex rule. The responsive media queries below ALSO use
   !important so they can still override this base rule when they fire. */
.kb-article-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) 240px !important;
  gap: 32px;
  align-items: start;
  position: relative;
}

/* Remove the old max-width cap and auto-centering from the article body.
   Higher-specificity selector beats the original .kb-article-main rule. */
.kb-article-layout > .kb-article-main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
}

/* Override the original sidebar fixed width (was 300px from flex layout).
   Higher-specificity selector beats the original .kb-article-sidebar rule. */
.kb-article-layout > .kb-article-sidebar {
  width: 100%;
  min-width: 0;
}

/* THE ACTUAL FIX: ProseMirror renders each content block with max-width: 640px.
   This is the rule that was capping the article text — nothing else could fix it.
   !important is needed here because Pylon injects this rule after our stylesheet. */
.kb-article-body .ProseMirror > * {
  max-width: none !important;
}

/* ── Left sidebar: Articles in this section ── */
.kb-section-nav {
  position: sticky;
  top: 40px;
  align-self: start;
  width: 220px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  flex-shrink: 0;
  margin-top: 24px;
  /* Hide until JS populates it */
  visibility: hidden;
}

.kb-section-nav.kb-section-nav--loaded {
  visibility: visible;
}

.kb-section-nav-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
  padding: 0 10px;
  margin-bottom: 6px;
}

.kb-section-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-section-nav-item {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--neutral-700);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  word-break: break-word;
}

.kb-section-nav-item:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-900);
  text-decoration: none;
}

/* Active article: solid green pill */
.kb-section-nav-item--active {
  background-color: #1FAA4A;
  color: #ffffff;
  font-weight: 500;
}

.kb-section-nav-item--active:hover {
  background-color: #1a9640;
  color: #ffffff;
}

/* ── Responsive: collapse to 2-column at medium widths ──
   Must also use !important to override the !important base rule above. */
@media (max-width: 960px) {
  .kb-article-layout {
    grid-template-columns: 1fr 260px !important;
  }

  .kb-section-nav {
    display: none;
  }
}

/* ── Responsive: single column on mobile ── */
@media (max-width: 768px) {
  .kb-article-layout {
    grid-template-columns: 1fr !important;
  }

  .kb-article-content-wrapper .kb-content {
    max-width: 100%;
  }
}

/* ── Article page: align header with content area ──
   On article pages, the content wrapper uses 40px horizontal padding and
   max-width: 1600px. This matches the header to those same values so the
   logo sits above the left edge of the content and the logout button sits
   above the right edge — at every viewport width. */
.kb-page-layout:has(.kb-article-content-wrapper) .kb-header {
  padding-left: 40px;
  padding-right: 40px;
}

.kb-page-layout:has(.kb-article-content-wrapper) .kb-header-inner {
  max-width: 1600px;
}


/* ============================================================
   COLLECTION PAGE SIDEBAR NAV — CSS ADDITIONS (v4)
   Key changes from v3:
   - Active state: green pill (#1FAA4A) matching article page sidebar
   - Font system: Inter 13px pill-style items matching .kb-section-nav-item
   - Sub-subcollections: clearly heavier font + darker color vs article leaf links
   ============================================================ */

/* ── Override collection wrapper: remove centering so sidebar can span full height ── */
.kb-collection-content-wrapper {
  padding: 0 0 0 40px !important;
  justify-content: flex-start !important;
}

/* Keep search-results margin for collection pages */
.kb-collection-main #kb-search-results {
  margin-top: 24px;
}

/* ── 2-column layout: sidebar | main ── */
.kb-collection-layout {
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: stretch;
}

/* ── Left sidebar shell (always full height — provides the border-right) ── */
.kb-collection-sidebar-nav {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--neutral-200);
  background: var(--neutral-base);
}

/* ── Sticky inner wrapper (scrolls independently of main content) ── */
.kb-coll-nav-inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 28px 8px 32px 12px;
  /* Subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-200) transparent;
}

.kb-coll-nav-inner::-webkit-scrollbar {
  width: 4px;
}

.kb-coll-nav-inner::-webkit-scrollbar-track {
  background: transparent;
}

.kb-coll-nav-inner::-webkit-scrollbar-thumb {
  background-color: var(--neutral-200);
  border-radius: 4px;
}

/* ── Main content area ── */
.kb-collection-main {
  flex: 1;
  min-width: 0;
  padding: 0 32px 32px 32px;
  max-width: 1000px;
}

/* ── Top-level collection rows ── */
.kb-coll-nav-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 2px;
}

/* ── Collection/subcollection link (title text) ── */
/* Base style: matches .kb-section-nav-item on article page */
.kb-coll-nav-link {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  text-decoration: none;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  word-break: break-word;
}

.kb-coll-nav-link:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-900);
  text-decoration: none;
}

/* Active state: solid green pill — matches .kb-section-nav-item--active */
.kb-coll-nav-link--active {
  background-color: #1FAA4A !important;
  color: #ffffff !important;
  font-weight: 600;
}

.kb-coll-nav-link--active:hover {
  background-color: #1a9640 !important;
  color: #ffffff !important;
}

/* ── Chevron toggle button ── */
.kb-coll-nav-chevron-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--neutral-400);
  border-radius: 4px;
  margin-top: 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kb-coll-nav-chevron-btn:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

/* Chevron icon: rotates when expanded */
.kb-coll-nav-chevron-icon {
  display: block;
  transition: transform 0.2s ease;
}

.kb-coll-nav-chevron-icon--open {
  transform: rotate(180deg);
}

/* ── Children container (indents subcollections/articles) ── */
.kb-coll-nav-children {
  padding-left: 8px;
  margin-bottom: 2px;
}

/* Subcollection rows inside a children container */
.kb-coll-nav-children .kb-coll-nav-row {
  margin-bottom: 1px;
}

/* Subcollection link: same size, slightly lighter weight */
.kb-coll-nav-children .kb-coll-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
}

/* Sub-subcollection: visually distinct from articles —
   keeps font weight 500 but uses neutral-800 + a faint background track */
.kb-coll-nav-children .kb-coll-nav-children .kb-coll-nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-800);
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-150, var(--neutral-200));
}

.kb-coll-nav-children .kb-coll-nav-children .kb-coll-nav-link:hover {
  background-color: var(--neutral-100);
}

.kb-coll-nav-children .kb-coll-nav-children .kb-coll-nav-link--active {
  background-color: #1FAA4A !important;
  border-color: #1FAA4A !important;
  color: #ffffff !important;
}

/* ── Article links (leaf nodes, no chevron, no border) ── */
.kb-coll-nav-article {
  display: block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-500);
  text-decoration: none;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 6px;
  margin-bottom: 1px;
  transition: background-color 0.15s ease, color 0.15s ease;
  word-break: break-word;
}

.kb-coll-nav-article:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  text-decoration: none;
}

/* Spacing below a group of article links */
.kb-coll-nav-children .kb-coll-nav-article:last-child {
  margin-bottom: 4px;
}

/* Divider between top-level collection sections */
.kb-coll-nav-divider {
  height: 1px;
  background: var(--neutral-200);
  margin: 6px 0;
}

/* Loading state */
.kb-coll-nav-loading {
  font-size: 13px;
  color: var(--neutral-400);
  padding: 12px 8px;
}

/* ── Responsive: shrink sidebar on medium screens ── */
@media (max-width: 1100px) {
  .kb-collection-sidebar-nav {
    width: 200px;
  }
}

/* ── Responsive: hide sidebar on small screens ── */
@media (max-width: 768px) {
  .kb-collection-layout {
    flex-direction: column;
  }

  .kb-collection-sidebar-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--neutral-200);
  }

  .kb-coll-nav-inner {
    position: static;
    max-height: none;
    padding: 16px 16px 8px 16px;
  }

  .kb-collection-main {
    padding: 0 16px 24px 16px;
  }
}


/* ================================================================
   CHELSEY HOMEPAGE ADDITIONS - v12 (search fix)
   Append this entire file to the bottom of "Styling_styles.css - 3col v5".
   Do NOT replace v5 - just paste below the last line.

   v12 changes vs v11:
   - Removed the global "#kb-search-results { display:none !important }" rule
     and the "?search=" URL-hijack approach. Search now uses Pylon's NATIVE
     mechanism: Pylon toggles data-kb-state="searching" on .kb-banner and
     renders results into #kb-search-results inline (no page reload, no URL
     change) - exactly like support.usepylon.com.
   - Added a native search-swap block scoped to this homepage's structure
     (.pano-custom-blocks / .pano-body) so results show and the browse
     content hides while searching.
   - Hard-capped icon sizes so search-result icons (and block icons) can
     never balloon.
   ================================================================ */
/* -- Brand tokens -- */
:root {
  --pano-navy: #1B1B4B;
  --pano-green: #2FBF71;
  --pano-green-light: #6FD49B;
  --pano-text: #1B1B4B;
  --pano-muted: #5A6075;
  --pano-border: #E5E7EB;
  --pano-font: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body, .kb-page-layout {
  font-family: var(--pano-font);
  color: var(--pano-text);
  background: #fff;
  margin: 0;
}
/* -- Banner: let Pylon's background image/gradient show through and fill
   the full hero area. position:relative + overflow:hidden ensures the
   absolutely-positioned bg image is clipped to the banner's bounds. -- */
.kb-banner {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
  overflow: hidden !important;
}
/* Stretch bg image to fill the full auto-height banner.
   Using inset:0 instead of height:100% so it works when parent height is auto. */
.kb-banner-bg-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}
/* Solid color background variant */
.kb-banner-bg-color {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
/* -- Searching state: keep the banner just tall enough to show the
   search input. -- */
.kb-banner[data-kb-state="searching"] {
  height: auto !important;
  min-height: 0 !important;
}
/* Tighten hero padding so the search bar floats up near the header */
.kb-banner[data-kb-state="searching"] .pano-hero-content {
  padding: 12px 24px 16px !important;
}
/* Tabs, title, and popular searches stay visible during search. */
/* Hide Pylon's native banner title and search container
   (we render our own pano-hero-content in their place) */
.kb-banner-content,
.kb-banner-title,
.kb-banner-title-text,
.kb-search-container { display: none !important; }
/* -- Header: sits above the background image -- */
.kb-header {
  position: relative;
  z-index: 2;
}
/* -- Logo: show only the variant that matches the banner.
   kb-banner--dark-text = light background -> show default (dark) logo
   kb-banner--light-text = dark background -> show bright (light) logo -- */
.kb-banner--dark-text .kb-logo-bright  { display: none !important; }
.kb-banner--light-text .kb-logo-default { display: none !important; }
/* -- Hamburger / nav toggle: hidden at all screen sizes. -- */
.kb-nav-toggle { display: none !important; }
/* -- Hide Pylon-native duplicate nav links only (they carry rel="noreferrer"; the logout button does not) -- */
.kb-header-nav > a[rel~="noreferrer"]:not(.kb-header-link) { display: none !important; }
/* -- Nav links: bold + extra spacing so they're easier to read -- */
.kb-header-link { font-weight: 700 !important; padding: 0 12px !important; }
/* -- Compact the header -- */
.kb-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kb-header-logo img { height: 32px !important; }
/* -- Header nav: keep login/logout and hamburger on the same row -- */
.kb-header-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
/* -- Shrink the auth avatar / person icon -- */
#kb-auth img,
.kb-auth-avatar {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  border-radius: 50%;
}
#kb-auth svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}
.kb-auth-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px !important;
  font-size: 13px !important;
}
/* -- Hero content area (sits on top of background image) -- */
.pano-hero-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 0;
  position: relative;
  z-index: 1;
}
.pano-hero-title {
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  margin: 0 0 32px;
  line-height: 1.15;
}
/* Light background variant: dark text (Pylon sets DarkText=true for light banners) */
.pano-hero--dark-text .pano-hero-title { color: var(--pano-navy); }
.pano-hero--dark-text .pano-popular { color: var(--pano-text); }
.pano-hero--dark-text .pano-popular a {
  border-color: rgba(27, 27, 75, 0.25);
  color: var(--pano-text);
  background: rgba(27, 27, 75, 0.05);
}
.pano-hero--dark-text .pano-popular a:hover { background: rgba(27, 27, 75, 0.1); }
.pano-hero--dark-text .pano-tabs { background: rgba(27, 27, 75, 0.08); }
.pano-hero--dark-text .pano-tab { color: var(--pano-navy); border-color: rgba(27, 27, 75, 0.25); }
.pano-hero--dark-text .pano-tab.is-active { background: var(--pano-navy); color: #fff; }
/* -- Search box inside hero -- */
#kb-search {
  position: relative;
  max-width: 100%;
}
/* Move Pylon's injected search icon to the RIGHT, inside the box, clickable.
   Pylon renders: #kb-search > .kb-search-container > .kb-search-icon (pinned
   left:0, pointer-events:none) + input.KnowledgeBaseSearchInput. We flip the
   icon container to the right edge; the homepage script focuses the input on
   click. The input already reserves right padding (see #kb-search input). */
#kb-search .kb-search-container {
  width: 100% !important;
}
#kb-search .kb-search-icon {
  left: auto !important;
  right: 0 !important;
  padding-left: 0 !important;
  padding-right: 18px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
#kb-search svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  color: var(--pano-muted) !important;
}
#kb-search input,
#kb-search [role="combobox"] {
  background: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 56px !important;
  font-size: 17px !important;
  font-family: var(--pano-font);
  padding: 0 56px 0 24px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: 100% !important;
}
#kb-search input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47, 191, 113, 0.3), 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* -- Popular searches -- */
.pano-popular {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 15px;
}
.pano-popular .label { font-weight: 600; margin-right: 4px; }
.pano-popular a {
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s;
  cursor: pointer;
}
.pano-popular a:hover { background: rgba(255, 255, 255, 0.18); }
/* -- Product tabs (bottom of hero/banner) -- */
.pano-tabs {
  display: flex;
  margin-top: 32px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.pano-tabs::-webkit-scrollbar { display: none; }
.pano-tab {
  padding: 12px 22px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
  transition: background 0.15s, color 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pano-tab:hover { background: rgba(255, 255, 255, 0.85); color: #1B1B4B; }
.pano-tab.is-active { background: #fff; color: var(--pano-navy); border-color: transparent; }
/* -- Custom content blocks -- */
.pano-custom-blocks {
  background: #f3f4f6;
  border-bottom: 1px solid var(--pano-border);
  padding: 32px 24px 40px;
}
.pano-custom-blocks-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pano-custom-blocks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pano-custom-block-card {
  background: #fff;
  border: 1px solid var(--pano-border);
  border-radius: 8px;
  padding: 22px 18px 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s;
}
.pano-custom-block-card:hover {
  box-shadow: 0 4px 12px rgba(27, 27, 75, 0.1);
}
.pano-custom-block-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf7f2;
  border-radius: 8px;
  flex-shrink: 0;
}
/* Hard-cap the block icon size. The source SVGs use viewBox="0 0 48 48"
   with NO width/height attributes, so without a firm CSS size they fall
   back to their intrinsic size and balloon. !important guarantees they
   stay 28px no matter what other layout state is active. */
.pano-custom-block-icon svg {
  width: 28px !important;
  height: 28px !important;
}
.pano-custom-block-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pano-navy);
  line-height: 1.3;
  margin: 0;
}
.pano-custom-block-desc {
  font-size: 13px;
  color: var(--pano-muted);
  line-height: 1.5;
  margin: 0;
}
/* -- Tab panels (show/hide) -- */
.pano-tab-panel { display: none; }
/* Active tab panel mirrors .pano-custom-blocks-inner sizing so
   "Search by Topic" aligns with the custom block cards above it. */
.pano-tab-panel.is-active { display: block; max-width: 1100px; margin: 0 auto; }
/* -- Custom block panels (show/hide - one per tab) -- */
.pano-blocks-panel { display: none; }
.pano-blocks-panel.is-active { display: block; }
/* -- Body / topic grid -- */
.pano-body {
  max-width: none;
  margin: 0;
  padding: 40px 24px 56px;
  text-align: left;
}
.pano-section-heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--pano-navy);
  margin: 0 0 20px;
  text-align: left;
}
.pano-empty { color: var(--pano-muted); font-size: 15px; text-align: left; }
.pano-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.pano-topic-card {
  background: #fff;
  border: 1px solid var(--pano-border);
  border-left: 4px solid var(--pano-green);
  border-radius: 8px;
  padding: 24px 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(27, 27, 75, 0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pano-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(27, 27, 75, 0.09);
}
.pano-topic-title { font-size: 18px; font-weight: 700; color: var(--pano-navy); margin: 0; }
.pano-topic-desc { font-size: 14px; color: var(--pano-muted); line-height: 1.5; margin: 0; }
/* -- Hide Pylon footer branding (logo + "Powered by Pylon") -- */
.kb-footer-logo,
.kb-powered-by { display: none !important; }
/* -- CTA banner -- */
.pano-cta {
  background: var(--pano-navy);
  color: #fff;
  text-align: center;
  padding: 48px 24px;
}
.pano-cta h2 {
  color: #fff;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  margin: 0 0 20px;
}
.pano-cta-btn {
  display: inline-block;
  background: var(--pano-green);
  color: #fff;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s;
}
.pano-cta-btn:hover { background: var(--pano-green-light); color: var(--pano-navy); }
/* -- Responsive -- */
@media (max-width: 860px) {
  .pano-custom-blocks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pano-custom-blocks-grid { grid-template-columns: 1fr; }
  .pano-tabs { border-radius: 0; }
}

/* ================================================================
   NATIVE SEARCH SWAP (v12)

   Pylon's own search island injects the input into #kb-search, sets
   data-kb-state="searching" on .kb-banner while the user is typing, and
   renders results into #kb-search-results. We just react to that state.

   This homepage's structure differs from Pylon's default
   (.kb-content-wrapper / .kb-homepage-content), so the base stylesheet's
   native-swap rule does not match here. These rules re-create the swap for
   the .pano-custom-blocks / .pano-body structure. Because additions load
   AFTER the base sheet, they win.

   DOM (siblings inside .kb-page-layout):
     .kb-banner[data-kb-state]   <- Pylon flips this to "searching"
     .pano-custom-blocks         <- quick-start cards (browse)
     .pano-body > #kb-search-results + .pano-tab-panel(s)
   ================================================================ */

/* While searching: reveal Pylon's native results — only after Enter or icon click.
   Constrain to 1100px centered so results align with the centered search bar above. */
.kb-banner[data-kb-state="searching"][data-results-ready] ~ .pano-body #kb-search-results {
  display: block !important;
  padding: 8px 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
/* ...and hide the browse content so results have the stage. */
.kb-banner[data-kb-state="searching"] ~ .pano-custom-blocks {
  display: none !important;
}
.kb-banner[data-kb-state="searching"] ~ .pano-body .pano-tab-panel {
  display: none !important;
}
/* Hide the hero browse chrome so only the title + search box remain. */
.kb-banner[data-kb-state="searching"] .pano-popular,
.kb-banner[data-kb-state="searching"] .pano-tabs {
  display: none !important;
}
/* Give results breathing room above (pano-body is now full-width, no auto margin). */
.kb-banner[data-kb-state="searching"] ~ .pano-body {
  padding-top: 28px;
}
/* Force results text left-aligned — overrides any Pylon base text-align: center. */
.pano-body #kb-search-results,
.pano-body .kb-ask-ai,
.pano-body .kb-search-result-item {
  text-align: left !important;
}
/* Hide the bottom CTA while searching. It lives outside .kb-page-layout,
   so it can't be reached by a selector from .kb-banner; the homepage script
   toggles body.kb-is-searching to drive this. */
body.kb-is-searching .pano-cta {
  display: none !important;
}

/* ── Ask AI: accuracy disclaimer appended below the response ── */
.kb-ask-ai::after {
  content: 'AI-generated responses may be incomplete or inaccurate. Always verify with the source articles before acting on this information.';
  display: block;
  font-size: 11px;
  color: var(--neutral-500);
  font-style: italic;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--neutral-100);
  line-height: 1.4;
  text-align: left;
}

/* ── Sources list injected by JS ── */
.pano-ai-sources {
  border-top: 1px solid var(--neutral-200);
  margin-top: 12px;
  padding-top: 10px;
}
.pano-ai-sources-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-600);
  margin: 0 0 4px;
}
.pano-ai-sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pano-ai-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-top: 1px solid var(--neutral-100);
}
.pano-ai-source-index {
  flex-shrink: 0;
  width: 16px;
  font-size: 13px;
  color: var(--neutral-400);
  text-align: center;
}
.pano-ai-source-link {
  flex: 1;
  font-size: 14px;
  color: var(--neutral-900);
  text-decoration: none;
}
.pano-ai-source-link:hover { text-decoration: underline; }
.pano-ai-source-tag {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--neutral-500);
}
.pano-ai-sources-toggle {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #1FAA4A;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px 0;
  text-align: left;
}
.pano-ai-sources-toggle:hover { text-decoration: underline; }

/* ================================================================
   ICON SAFETY CAP (v12)

   Pylon's search-result rows contain inline SVG/IMG icons. The base
   stylesheet sizes the ones it knows about (e.g. 16px breadcrumb icons),
   but any icon it does NOT explicitly size would fall back to its intrinsic
   size and render huge. These caps guarantee nothing inside the results
   area can balloon. Plain max-width/height (no !important) so the base
   sheet's explicit sizes still win where they exist.
   ================================================================ */
#kb-search-results svg {
  max-width: 24px;
  max-height: 24px;
}
#kb-search-results img {
  max-width: 100%;
  height: auto;
}
/* WCAG: ensure block card text is selectable regardless of browser defaults */
.pano-custom-block-title,
.pano-custom-block-desc { user-select: text; }