:root{
  --kb-topnav-h: 120px;
  --kb-header-h: 44px;
  --kb-footer-h: 34px;
  /* Theme tokens (light defaults) */
  --kb-border: #e6e6e6;
  --kb-bg: #f7f7f9;            /* pane background */
  --kb-page-bg: #f7f7f9;       /* document background */
  --kb-surface: #ffffff;       /* cards/pane titles/forms */
  --kb-surface-2: #fafafa;     /* subtle surfaces (toolbars/thead) */
  --kb-text: #111;
  --kb-muted: #666;
  --kb-link: #0b3d91;
  --kb-locked: #999;
  --kb-content-pad-top: 14px;
  --kb-content-pad-x: 18px;
  --kb-content-pad-bottom: 40px;  
  --kb-tree-indent: 14px;

  --kb-topnav-bg: #062b66;
  --kb-topnav-fg: #fff;
  --kb-header-bg: #0b3d91;
  --kb-header-fg: #fff;
  --kb-footer-bg: #2b2b2b;
  --kb-footer-fg: #cfcfcf;

  --kb-row-hover: rgba(0,0,0,.04);
  --kb-row-active: rgba(11, 61, 145, 0.08);

  --kb-code-bg: #0b1020;
  --kb-code-fg: #e6e6e6;
  --kb-danger: #b00020;
}

/* Ensure browser-native form controls (inputs/selects) match the selected KB theme.
   If we allow "light dark", the UA may pick dark controls even when KB is in Light mode
   (e.g. when the OS prefers dark), causing dark backgrounds with dark text. */
html{
  color-scheme: light;
}
html[data-kb-theme="light"]{
  color-scheme: light;
}
html[data-kb-theme="dark"]{
  --kb-border: #2a3242;
  --kb-bg: #0f131b;
  --kb-page-bg: #0b0d10;
  --kb-surface: #151a24;
  --kb-surface-2: #10151f;
  --kb-text: #e8e9ee;
  --kb-muted: #a6adbb;
  --kb-link: #8ab4ff;
  --kb-locked: #7a8294;

  --kb-topnav-bg: #061632;
  --kb-topnav-fg: #eef2ff;
  --kb-header-bg: #071b3d;
  --kb-header-fg: #eef2ff;
  --kb-footer-bg: #0c0f14;
  --kb-footer-fg: #a6adbb;

  --kb-row-hover: rgba(255,255,255,.06);
  --kb-row-active: rgba(138, 180, 255, 0.14);

  --kb-code-bg: #0a0f1f;
  --kb-code-fg: #e6e6e6;
  --kb-danger: #ff6b7a;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--kb-text);
  background: var(--kb-page-bg);
}

.kb-topnav{
  height: var(--kb-topnav-h);
  display:flex;
  align-items:center;
  padding: 0 14px;
  background: var(--kb-topnav-bg); /* darker than header to create a clear hierarchy */
  color: var(--kb-topnav-fg);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.kb-topnav-inner{
  max-width: 1400px;
  margin: 0; /* left-align inner content (was centered with 0 auto) */
  width: 100%;
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}
.kb-topnav-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  color:#fff;
  text-decoration:none;
  flex: 0 0 auto;
  min-width: 0;
}
.kb-topnav-logo{
  height: 92px; /* image is 420x141; scale down but keep readable */
  width: auto;
  display:block;
  object-fit: contain;
  max-width: 320px; /* safety: prevents overly-wide logos from breaking the topnav */
}
.kb-topnav-brand-text{
  font-weight: 650;
  white-space: nowrap;
}
.kb-topnav-links{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 8px;
  overflow:auto;       /* allow horizontal scroll when many sections exist */
  white-space: nowrap;
  padding: 0 2px;
}
.kb-topnav-links a{
  color: var(--kb-topnav-fg);
  text-decoration:none;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 999px;
}
.kb-topnav-links a:hover{ background: rgba(255,255,255,.12); }
.kb-topnav-links a.is-active{
  background: rgba(255,255,255,.18);
  font-weight: 650;
}
/* Section links should also keep their color after visit */
.kb-topnav-links a:visited{
  color: var(--kb-topnav-fg);
}
.kb-topnav-sep{
  opacity: 0.6;
  padding: 0 2px;
}

@media (max-width: 520px){
  :root{ --kb-topnav-h: 96px; }
  .kb-topnav-logo{ height: 76px; }
  .kb-topnav-links a{ padding: 6px 10px; }
}

/* While dragging nodes: prevent text selection / accidental clicks */
body.kb-dragging{
  user-select: none;
}
body.kb-dragging .kb-tree{
  touch-action: none; /* enables smooth pointer-move dragging on touch devices */
}

.kb-header{
  height: var(--kb-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background: var(--kb-header-bg);
  color: var(--kb-header-fg);
}
.kb-header a{ color: var(--kb-header-fg); text-decoration:none; }
.kb-brand-link{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.kb-logo{
  height: 28px;
  width: auto;
  display:block;
}
.kb-brand-text{
  font-weight: 650;
  white-space: nowrap;
}
.kb-header .kb-user{
  display:flex;
  gap:10px;
  align-items:center;
  font-size: 14px;
}
.kb-header form{ margin:0; }
.kb-header button{
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color: var(--kb-header-fg);
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}
/* Header links should never turn purple when visited */
.kb-header a:visited{
  color: var(--kb-header-fg);
}
.kb-theme-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 0 6px 0 0;
}
.kb-theme-label{
  font-size: 12px;
  opacity: 0.85;
  user-select: none;
}
.kb-theme-toggle[data-kb-theme="light"] .kb-theme-label-light,
.kb-theme-toggle[data-kb-theme="dark"] .kb-theme-label-dark{
  font-weight: 650;
  opacity: 1;
}
/* Switch (slider) */
.kb-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}
.kb-switch input{
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.kb-switch-slider{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 140ms ease, border-color 140ms ease;
}
.kb-switch-slider::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform 160ms ease;
}
.kb-switch input:checked + .kb-switch-slider{
  background: rgba(0,0,0,0.18);
}
.kb-switch input:checked + .kb-switch-slider::after{
  transform: translateX(20px);
}
.kb-switch input:focus-visible + .kb-switch-slider{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}

.kb-shell{
  /* Keep the app shell locked to the viewport so scrolling happens inside the panes
     (.kb-tree/.kb-content/.kb-toc). This makes sticky UI (like the editor toolbar)
     reliably stick to the top while editing long articles. */
  height: calc(100vh - var(--kb-topnav-h) - var(--kb-header-h) - var(--kb-footer-h));
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
}

/* Admin area doesn't need the TOC pane: hide the 3rd column and switch to a 2-column shell. */
body.kb-admin-area .kb-shell{
  grid-template-columns: 280px minmax(0, 1fr);
}
body.kb-admin-area .kb-toc{
  display: none;
}

.kb-footer{
  height: var(--kb-footer-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 12px;
  background: var(--kb-footer-bg);
  color: var(--kb-footer-fg);
  font-size: 12px;
  line-height: 1.2;
}

.kb-tree, .kb-toc{
  border-right:1px solid var(--kb-border);
  background: var(--kb-bg);
  overflow:auto;
}
.kb-toc{
  border-right:0;
  border-left:1px solid var(--kb-border);
}

/* When a guest has no readable content in a section, the JS tree renderer may insert
   a placeholder message into #kb-tree (e.g. "No public content yet...").
   Requirement: keep the left column, but don't show any text in this empty-state.

   Implementation: if #kb-tree contains no <ul> at all, hide its children.
   (When real tree nodes exist, they are rendered as <ul>/<li> and this rule won't apply.) */
.kb-tree #kb-tree:not(:has(ul)) > *{
  display:none;
}
.kb-pane-title{
  padding:10px 12px;
  font-weight:600;
  border-bottom:1px solid var(--kb-border);
  background: var(--kb-surface);
}

.kb-tree-hint{
  display:none;
  padding: 8px 12px;
  border-bottom:1px solid var(--kb-border);
  background: var(--kb-surface);
  color: var(--kb-muted);
  font-size: 12px;
  line-height: 1.35;
}
.kb-tree-hint.is-visible{ display:block; }

.kb-content{
  overflow:auto;
  padding: 0;
}
.kb-content-inner{
  padding: var(--kb-content-pad-top) var(--kb-content-pad-x) var(--kb-content-pad-bottom);
  position: relative; /* enables loading overlay pseudo-element */
}

/* Faster logged-in navigation: we swap content via /api/article instead of full reload.
   Provide a subtle loading hint without a full page flicker. */
body.kb-nav-loading .kb-content-inner{
  opacity: 0.55;
  transition: opacity 90ms ease;
}
body.kb-nav-loading .kb-content-inner::after{
  content: "Loading…";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: var(--kb-muted);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--kb-border);
  border-radius: 999px;
  padding: 4px 10px;
  pointer-events: none;
}
html[data-kb-theme="dark"] body.kb-nav-loading .kb-content-inner::after{
  background: rgba(15, 19, 27, 0.92);
}

.kb-breadcrumb{
  font-size: 13px;
  color: var(--kb-muted);
  margin: 2px 0 10px;
}
.kb-breadcrumb a{ color: var(--kb-link); text-decoration:none; }
.kb-breadcrumb a:hover{ text-decoration:underline; }
.kb-breadcrumb a:visited{ color: var(--kb-link); }

.kb-breadcrumb-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}
.kb-breadcrumb-row .kb-breadcrumb{
  margin: 0; /* row controls spacing */
  flex: 1 1 auto;
  min-width: 0;
}
.kb-breadcrumb-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  text-align: right;
}

.kb-meta{
  color: var(--kb-muted);
  font-size: 13px;
  margin: 8px 0 14px;
}
.kb-meta.kb-meta-inline{
  margin: 0;
}
.kb-actions{
  display:flex;
  gap:10px;
  margin: 10px 0 14px;
}
.kb-actions.kb-actions-inline{
  margin: 0;
}
.kb-actions a, .kb-actions button{
  display:inline-block;
  border:1px solid var(--kb-border);
  background: var(--kb-surface);
  padding:7px 10px;
  border-radius:6px;
  text-decoration:none;
  color: var(--kb-text);
  font-size:14px;
}
.kb-actions button{ cursor:pointer; }
.kb-article-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 10px;
}
.kb-article-title{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0; /* allow wrapping within flex layout */
  overflow-wrap: anywhere;
}
.kb-article-head-right{
  margin-left: auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap; /* allows meta/buttons to wrap if viewport is too narrow */
}

.kb-form{
  max-width: 920px;
}
.kb-form .kb-field{
  margin: 10px 0;
}
.kb-form label{
  font-size: 14px;
}
.kb-form input,
.kb-form input:not([type]),
.kb-form textarea,
.kb-form select{
  width: min(720px, 100%);
  padding: 8px;
  border: 1px solid var(--kb-border);
  border-radius: 6px;
  background: var(--kb-surface);
  color: var(--kb-text);
}
.kb-form textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Light/Dark friendly focus ring for inputs on Login/Header forms */
.kb-form input:focus,
.kb-form input:not([type]):focus,
.kb-form textarea:focus,
.kb-form select:focus,
/* Fallback for forms that don't use .kb-form wrapper (e.g. minimal login forms) */
.kb-content input:not([type]):focus,
.kb-content textarea:focus,
.kb-content select:focus{
  outline: none;
  border-color: var(--kb-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-link) 25%, transparent);
}
/* Subtle placeholder color in light theme; keep readable in dark */
.kb-form input::placeholder,
.kb-form textarea::placeholder,
.kb-content input::placeholder,
.kb-content textarea::placeholder{
  color: color-mix(in srgb, var(--kb-text) 55%, transparent);
}
/* Checkbox/Radio accent matches brand link color (nice on Login/Header pages) */
.kb-form input[type="checkbox"],
.kb-form input[type="radio"],
.kb-content input[type="checkbox"],
.kb-content input[type="radio"]{
  accent-color: var(--kb-link);
}
/* Primary buttons on forms (Login, Save, Upload, etc.) */
.kb-btn,
.kb-form button,
.kb-form input[type="submit"],
.kb-content .kb-btn,
.kb-content button[type="submit"],
.kb-content input[type="submit"]{
  border: 1px solid color-mix(in srgb, var(--kb-link) 80%, #000);
  background: var(--kb-link);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.kb-btn:hover,
.kb-form button:hover,
.kb-form input[type="submit"]:hover,
.kb-content .kb-btn:hover,
.kb-content button[type="submit"]:hover,
.kb-content input[type="submit"]:hover{
  filter: brightness(1.05);
}
.kb-btn:disabled,
.kb-form button:disabled,
.kb-form input[type="submit"]:disabled,
.kb-content .kb-btn:disabled,
.kb-content button[type="submit"]:disabled,
.kb-content input[type="submit"]:disabled{
  opacity: .65;
  cursor: not-allowed;
}

.kb-alert{
  border:1px solid var(--kb-border);
  background: var(--kb-surface);
  border-radius:8px;
  padding:10px 12px;
  margin: 10px 0 16px;
}
.kb-alert.error{ border-color:#f2b8b5; background:#fff5f5; }
.kb-alert.ok{ border-color:#b7eb8f; background:#f6ffed; }
html[data-kb-theme="dark"] .kb-alert.error{ border-color: rgba(255, 107, 122, 0.45); background: rgba(255, 107, 122, 0.10); }
html[data-kb-theme="dark"] .kb-alert.ok{ border-color: rgba(183, 235, 143, 0.45); background: rgba(183, 235, 143, 0.10); }

.kb-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 10px;
  overflow: hidden;
}
.kb-table th,
.kb-table td{
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--kb-border);
  font-size: 14px;
  vertical-align: top;
}
.kb-table th{
  background: var(--kb-surface-2);
  font-weight: 600;
}
.kb-table tr:last-child td{ border-bottom: 0; }
.kb-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
}
.kb-badge.ok{ border-color:#b7eb8f; background:#f6ffed; }
.kb-badge.warn{ border-color:#ffe58f; background:#fffbe6; }
html[data-kb-theme="dark"] .kb-badge.ok{ border-color: rgba(183,235,143,0.45); background: rgba(183,235,143,0.10); }
html[data-kb-theme="dark"] .kb-badge.warn{ border-color: rgba(255,229,143,0.45); background: rgba(255,229,143,0.10); }

.kb-tree ul{
  list-style:none;
  padding-left: 0;
  margin: 4px 0;
}
.kb-tree li{ margin: 0; }
.kb-tree .kb-node{
  position: relative;
  display:flex;
  align-items:center;
  gap: 4px;
  padding: 2px 6px;
  border-radius:6px;
  line-height: 1.2;
}
.kb-tree .kb-node:hover{ background: var(--kb-row-hover); }
.kb-tree .kb-node.is-active{
  background: var(--kb-row-active);
}
.kb-tree .kb-node.kb-drag-source{
  opacity: 0.6;
  outline: 2px solid rgba(11, 61, 145, 0.25);
  outline-offset: 2px;
}
.kb-tree .kb-drag-handle{
  width: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
  color: color-mix(in srgb, var(--kb-text) 45%, transparent);
  cursor: grab;
  user-select:none;
  -webkit-user-drag: none; /* prevent native HTML drag cursor (we use Pointer Events DnD) */
  touch-action: none;
}
.kb-tree .kb-drag-handle:active{ cursor: grabbing; }
.kb-tree .kb-drop-target{
  outline: 2px dashed rgba(11, 61, 145, 0.35);
  outline-offset: 2px;
}
.kb-tree .kb-node.kb-drop-before{
  background: rgba(11, 61, 145, 0.06);
}
.kb-tree .kb-node.kb-drop-before::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -1px;
  border-top: 3px solid rgba(11, 61, 145, 0.55);
}
.kb-tree .kb-node.kb-drop-after{
  background: rgba(11, 61, 145, 0.06);
}
.kb-tree .kb-node.kb-drop-after::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 3px solid rgba(11, 61, 145, 0.55);
}
.kb-tree .kb-node.kb-drop-into{
  outline: 2px dashed rgba(11, 61, 145, 0.55);
  outline-offset: 2px;
  background: rgba(11, 61, 145, 0.06);
}
.kb-tree .kb-node.kb-drop-outdent{
  outline: 2px dashed rgba(11, 61, 145, 0.55);
  outline-offset: 2px;
  background: rgba(11, 61, 145, 0.04);
}
.kb-tree #kb-tree.kb-drop-root{
  outline: 2px dashed rgba(11, 61, 145, 0.35);
  outline-offset: 2px;
}
.kb-tree .kb-expander{
  width: 14px;
  height: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor:pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.kb-tree .kb-expander:hover{
  background: rgba(0,0,0,.06);
}
/* Caret arrow (right → down) with a small transition. */
.kb-tree .kb-expander::before{
  content:"";
  display:block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid color-mix(in srgb, var(--kb-text) 55%, transparent);
  transform: rotate(0deg);
  transition: transform 140ms ease;
  transform-origin: 2px 4px;
}
.kb-tree .kb-expander[aria-expanded="true"]::before{
  transform: rotate(90deg);
}
.kb-tree .kb-expander.kb-empty{
  visibility:hidden;
}
.kb-tree a{
  color: var(--kb-text);
  text-decoration:none;
  font-size: 14px;
  -webkit-user-drag: none; /* prevents "drag link" instead of moving nodes */
  /* Indent only the title text by nesting depth. */
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: calc(var(--kb-depth, 0) * var(--kb-tree-indent));
  overflow-wrap: anywhere;
}
.kb-tree a:hover{ text-decoration:underline; }
/* Prevent visited purple in the tree */
.kb-tree a:visited{ color: var(--kb-text); }
.kb-locked a{
  color: var(--kb-locked);
  pointer-events:none;
}
.kb-locked .kb-lock-label{
  font-size: 12px;
  color: var(--kb-locked);
  margin-left: 6px;
}

.kb-toc .kb-toc-inner{
  padding: 8px 12px 16px;
  position: relative; /* anchor the active-indicator bar */
  --kb-toc-indicator-top: 0px;
  --kb-toc-indicator-h: 0px;
  --kb-toc-indicator-opacity: 0;
}
.kb-toc .kb-toc-inner h3{
  margin: 10px 0 8px;
  font-size: 14px;
}

/* When there are no headings, we keep the TOC column but show no text (including title). */
.kb-toc[data-kb-has-toc="0"] .kb-pane-title{
  color: transparent; /* preserves layout height without visible text */
}

/* Active indicator bar (slides between items) */
.kb-toc .kb-toc-inner::before{
  content:"";
  position: absolute;
  left: 8px;
  top: var(--kb-toc-indicator-top);
  height: var(--kb-toc-indicator-h);
  width: 3px;
  border-radius: 999px;
  background: #111;
  opacity: var(--kb-toc-indicator-opacity);
  transition: top 160ms ease, height 160ms ease, opacity 160ms ease;
  will-change: top, height;
  pointer-events: none;
}

/* Remove numbering/bullets from TOC (and nested TOC lists) */
.kb-toc .kb-toc-list,
.kb-toc .kb-toc-inner ul,
.kb-toc .kb-toc-inner ol{
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-size: 13px;
}
.kb-toc .kb-toc-inner li{ margin: 2px 0; }
.kb-toc .kb-toc-inner li > ul,
.kb-toc .kb-toc-inner li > ol{
  margin-top: 4px;
  padding-left: 14px; /* indent nested items without list markers */
}

/* TOC link colors: dark grey, active is black (no underline for active) */
.kb-toc a{
  color: color-mix(in srgb, var(--kb-text) 70%, var(--kb-muted));
  text-decoration: none;
  display: block;
  padding: 2px 6px 2px 14px; /* space for the indicator bar */
}
.kb-toc a:hover{
  color: var(--kb-text);
  text-decoration: underline;
}
.kb-toc a.is-active,
.kb-toc a[aria-current="true"]{
  color: var(--kb-text);
  font-weight: 650;
  text-decoration: none; /* explicitly remove underline for active */
}
.kb-toc .kb-toc-list li.is-active > a{
  color: var(--kb-text);
  font-weight: 650;
  text-decoration: none;
}
/* Avoid purple visited links in TOC */
.kb-toc a:visited{
  color: color-mix(in srgb, var(--kb-text) 70%, var(--kb-muted));
}

/* Article content basics */
.kb-article-content{
  line-height: 1.55;
}
/* Global content links (avoid purple visited, keep palette consistent) */
.kb-content a{
  color: var(--kb-link);
  text-decoration: none;
}
.kb-content a:hover{ text-decoration: underline; }
.kb-content a:visited{
  /* Slightly toned variant of kb-link; not purple/pink */
  color: color-mix(in srgb, var(--kb-link) 85%, #333);
}
html[data-kb-theme="dark"] .kb-content a:visited{
  color: color-mix(in srgb, var(--kb-link) 85%, #fff);
}
.kb-article-content img{
  max-width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
.kb-article-content img[data-kb-display="small"]{ max-width: 320px; }
.kb-article-content img[data-kb-display="medium"]{ max-width: 640px; }
.kb-article-content img[data-kb-display="large"]{ max-width: 100%; }
/* Fallback: server-side renderer also emits kb-img-{size} classes.
   Keep sizing working even if a sanitizer removes data-* attributes. */
.kb-article-content img.kb-img-small{ max-width: 320px; }
.kb-article-content img.kb-img-medium{ max-width: 640px; }
.kb-article-content img.kb-img-large{ max-width: 100%; }
.kb-article-content pre{
  background: var(--kb-code-bg);
  color: var(--kb-code-fg);
  padding: 10px 12px;
  overflow:auto;
  border-radius:8px;
}
.kb-article-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Tables (viewer + editor) */
.kb-table-wrap{
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--kb-border);
  border-radius: 10px;
  background: var(--kb-surface);
  margin: 12px 0;
}
.kb-article-content table.kb-content-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px; /* enables horizontal scroll on small screens */
}
.kb-article-content table.kb-content-table th,
.kb-article-content table.kb-content-table td{
  padding: 6px 10px;
  border-bottom: 1px solid var(--kb-border);
  border-right: 1px solid var(--kb-border);
  vertical-align: top;
}
.kb-article-content table.kb-content-table th > p,
.kb-article-content table.kb-content-table td > p{
  /* Rendered table cells contain <p>...</p>.
     Default paragraph margins make cells look overly tall. */
  margin: 0;
}
.kb-article-content table.kb-content-table tr:last-child td,
.kb-article-content table.kb-content-table tr:last-child th{
  border-bottom: 0;
}
.kb-article-content table.kb-content-table th:last-child,
.kb-article-content table.kb-content-table td:last-child{
  border-right: 0;
}
.kb-article-content table.kb-content-table th{
  background: var(--kb-surface-2);
  font-weight: 650;
}

/* Editor: make tables usable and "grid-like" */
.kb-editor .ProseMirror table,
.kb-editor .kb-prosemirror table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.kb-editor .ProseMirror td,
.kb-editor .ProseMirror th,
.kb-editor .kb-prosemirror td,
.kb-editor .kb-prosemirror th{
  border: 1px solid var(--kb-border);
  padding: 6px 8px;
  vertical-align: top;
  min-width: 80px;
}
.kb-editor .ProseMirror th,
.kb-editor .kb-prosemirror th{
  background: #fafafa;
  font-weight: 650;
}
/* prosemirror-tables selection helper */
.kb-editor .ProseMirror .selectedCell,
.kb-editor .kb-prosemirror .selectedCell{
  background: rgba(11, 61, 145, 0.10);
}
.kb-editor .ProseMirror .column-resize-handle,
.kb-editor .kb-prosemirror .column-resize-handle{
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(11, 61, 145, 0.25);
  pointer-events: none;
}

/* Step 10: Rich embeds (SSR-safe; no scripts) */
.kb-embed{
  margin: 12px auto;
  border: 1px solid var(--kb-border);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  width: 100%;
  max-width: 100%;
}
.kb-embed[data-kb-display="small"],
.kb-embed.kb-embed-small{
  max-width: 480px;
}
.kb-embed[data-kb-display="medium"],
.kb-embed.kb-embed-medium{
  max-width: 760px;
}
.kb-embed[data-kb-display="large"],
.kb-embed.kb-embed-large{
  max-width: 100%;
}
.kb-embed.kb-embed-youtube{
  position: relative;
}
/* IMPORTANT:
   Don't use padding-top on the container itself when it also uses max-width (small/medium),
   because percentage paddings are based on the *parent width*.
   Using a ::before pseudo-element makes the ratio depend on the embed's own used width. */
.kb-embed.kb-embed-youtube::before{
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}
.kb-embed.kb-embed-youtube iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* MP4 video embeds */
.kb-embed.kb-embed-video{
  background: #000;
}
.kb-embed.kb-embed-video video{
  width: 100%;
  height: auto;
  display: block;
}

/* TipTap (Step 4: bundle foundation; Step 5 mounts it into add/edit forms) */
.kb-editor{
  border: 1px solid var(--kb-border);
  border-radius: 10px;
  background: var(--kb-surface);
  position: relative; /* needed for floating embed menus */
}
.kb-editor .ProseMirror,
.kb-editor .kb-prosemirror{
  padding: 10px 12px;
  min-height: 260px;
  outline: none;
}
.kb-editor .ProseMirror:focus,
.kb-editor .kb-prosemirror:focus{
  box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.15);
}
.kb-editor .ProseMirror p,
.kb-editor .kb-prosemirror p{ margin: 0 0 10px; }
.kb-editor .ProseMirror h2,
.kb-editor .kb-prosemirror h2{ margin: 18px 0 10px; }
.kb-editor .ProseMirror h3,
.kb-editor .kb-prosemirror h3{ margin: 16px 0 8px; }
.kb-editor .ProseMirror ul,
.kb-editor .ProseMirror ol,
.kb-editor .kb-prosemirror ul,
.kb-editor .kb-prosemirror ol{ margin: 0 0 10px; padding-left: 22px; }
.kb-editor .ProseMirror blockquote,
.kb-editor .kb-prosemirror blockquote{
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.02);
}
.kb-editor .ProseMirror pre,
.kb-editor .kb-prosemirror pre{
  background: var(--kb-code-bg);
  color: var(--kb-code-fg);
  padding: 10px 12px;
  overflow:auto;
  border-radius:8px;
}

/* Ensure large images don't overflow the editor/content area */
.kb-editor .ProseMirror img,
.kb-editor .kb-prosemirror img{
  max-width: 100%;
  height: auto;
  display: block;
}
.kb-editor .ProseMirror img[data-kb-display="small"],
.kb-editor .kb-prosemirror img[data-kb-display="small"]{ max-width: 320px; }
.kb-editor .ProseMirror img[data-kb-display="medium"],
.kb-editor .kb-prosemirror img[data-kb-display="medium"]{ max-width: 640px; }
.kb-editor .ProseMirror img[data-kb-display="large"],
.kb-editor .kb-prosemirror img[data-kb-display="large"]{ max-width: 100%; }

/* Editor-only: embeds should be selectable (iframes can steal clicks otherwise). */
.kb-editor .kb-embed iframe,
.kb-editor .kb-embed video{
  pointer-events: none;
}

/* Selected node highlight (helps discoverability for the embed menu). */
.kb-editor .ProseMirror-selectednode .kb-embed{
  outline: 2px solid rgba(11, 61, 145, 0.45);
  outline-offset: 2px;
}

/* Floating embed menu (shown when selecting an embed node like YouTube). */
.kb-embed-menu{
  position: absolute;
  /* Must float above sticky toolbars and neighboring panes (tree/toc). */
  z-index: 5000;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--kb-border);
  background: rgba(255,255,255,0.98);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transform: translate(-50%, -120%);
  backdrop-filter: blur(6px);
}
.kb-float-menu{
  /* Portaled overlays are positioned relative to the viewport so they:
     - are not clipped by scroll containers (like .kb-content { overflow:auto })
     - can overlap the tree/toc panes safely */
  position: fixed;
  z-index: 10000;
}
.kb-table-menu{
  /* Table menu uses the same base styling, but typically benefits from a bit more offset. */
  transform: translate(-50%, -135%);
}
.kb-link-menu{
  transform: translate(-50%, -135%);
}
.kb-link-menu input{
  border: 1px solid var(--kb-border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  min-width: 180px;
  background: #fff;
}
.kb-link-menu input[data-kb-link-target="1"]{
  min-width: 140px;
}

/* Reader: image zoom overlay */
body.kb-modal-open{ overflow: hidden; }
.kb-img-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.82);
}
.kb-img-overlay.is-open{ display: flex; }
.kb-img-overlay img{
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  cursor: zoom-out;
  background: #111;
}

/* TipTap integration UI (Step 5) */
.kb-editor-toolbar{
  /* Keep the editor toolbar visible when editing long articles.
     Works with the main content scroll container (.kb-content { overflow:auto }). */
  position: sticky;
  top: 0;
  z-index: 30;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--kb-border);
  background: var(--kb-surface-2);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
/* Add/Edit: collapsible "properties" panel above the editor */
.kb-props{
  margin: 10px 0 14px;
}
.kb-props > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: flex-end; /* right-aligned "More" */
  align-items: center;
  gap: 8px;
}
.kb-props > summary::-webkit-details-marker{ display:none; }
.kb-props-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
  color: var(--kb-text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}
.kb-props[open]{
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
  border-radius: 10px;
  padding: 10px 12px;
}
.kb-props[open] > summary{
  margin-bottom: 10px;
}
.kb-props-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.kb-props-grid .kb-field{
  margin: 0; /* grid controls spacing */
}
.kb-props-span-2{
  grid-column: 1 / -1;
}
.kb-props-meta{
  color: var(--kb-muted);
  font-size: 13px;
  line-height: 1.35;
}
.kb-props-meta code{
  color: #111;
}
@media (max-width: 820px){
  .kb-props-grid{ grid-template-columns: 1fr; }
  .kb-props-empty{ display:none; }
}
.kb-editor-btn{
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
  color: var(--kb-text);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.kb-editor-btn.is-active{
  color: var(--kb-link); /* blue (keeps palette: blue/black/white) */
}
.kb-editor-btn[data-kb-icon="1"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 7px;
}
.kb-editor-btn[data-kb-icon="1"]:hover{
  color: var(--kb-link);
}
.kb-editor-btn svg.kb-editor-icon{
  width: 16px;
  height: 16px;
  display: block;
}
.kb-editor-btn.is-active{
  border-color: rgba(11, 61, 145, 0.35);
  box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.10);
}
.kb-editor-btn.is-disabled,
.kb-editor-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}
.kb-editor-sep{
  width: 1px;
  height: 22px;
  background: var(--kb-border);
  margin: 0 2px;
}
.kb-editor-warning{
  padding: 8px 10px;
  border-bottom: 1px solid var(--kb-border);
  background: #fffbe6;
  color: #614700;
  font-size: 13px;
}
/* Hide raw JSON textarea once TipTap is loaded (keep as fallback when JS fails). */
html.kb-tiptap-loaded textarea.kb-editor-source{
  display:none;
}
html.kb-tiptap-loaded .kb-editor-fallback-note{
  display:none;
}

/* Editor loading / busy overlay
   - Used while the TipTap bundle mounts (initial page load)
   - Used during slow actions (image upload, embed insert)
*/
html.kb-editor-enabled textarea.kb-editor-source{
  display:none; /* hide raw JSON immediately on add/edit; watchdog re-enables on failure */
}
html.kb-editor-enabled .kb-editor-fallback-note{
  display:block;
}
/* Ensure once TipTap is loaded, the fallback note is hidden even if kb-editor-enabled is present. */
html.kb-editor-enabled.kb-tiptap-loaded .kb-editor-fallback-note{
  display:none;
}

.kb-editor[data-kb-loading="1"]{
  cursor: progress;
}
.kb-editor[data-kb-loading="1"] .kb-editor-toolbar,
.kb-editor[data-kb-loading="1"] .kb-editor-surface,
.kb-editor[data-kb-loading="1"] .ProseMirror,
.kb-editor[data-kb-loading="1"] .kb-prosemirror{
  pointer-events: none;
}
.kb-editor[data-kb-loading="1"]::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(1px);
  z-index: 40;
}
.kb-editor[data-kb-loading="1"]::after{
  content: attr(data-kb-loading-text);
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  padding: 8px 12px;
  border: 1px solid var(--kb-border);
  background: rgba(255,255,255,0.98);
  border-radius: 999px;
  color:#333;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  max-width: min(92%, 520px);
  text-align: center;
  pointer-events:none;
}

@media (max-width: 1100px){
  .kb-shell{ grid-template-columns: 280px minmax(0, 1fr); }
  .kb-toc{ display:none; }
}
@media (max-width: 820px){
  .kb-shell{ grid-template-columns: minmax(0, 1fr); }
  .kb-tree{ display:none; }
}