:root{
  --kb-topnav-h: 120px;
  --kb-header-h: 44px;
  --kb-footer-h: 34px;
  --kb-border: #e6e6e6;
  --kb-bg: #f7f7f9;
  --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;
}

*{ 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:#111;
}

.kb-topnav{
  height: var(--kb-topnav-h);
  display:flex;
  align-items:center;
  padding: 0 14px;
  background: #062b66; /* darker than header to create a clear hierarchy */
  color: #fff;
  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:#fff;
  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;
}
.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:#0b3d91;
  color:#fff;
}
.kb-header a{ color:#fff; 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:#fff;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}

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

.kb-footer{
  height: var(--kb-footer-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 12px;
  background: #2b2b2b;
  color: #cfcfcf;
  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);
}
.kb-pane-title{
  padding:10px 12px;
  font-weight:600;
  border-bottom:1px solid var(--kb-border);
  background:#fff;
}

.kb-tree-hint{
  display:none;
  padding: 8px 12px;
  border-bottom:1px solid var(--kb-border);
  background:#fff;
  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: #666;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--kb-border);
  border-radius: 999px;
  padding: 4px 10px;
  pointer-events: none;
}

.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-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:#fff;
  padding:7px 10px;
  border-radius:6px;
  text-decoration:none;
  color:#111;
  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[type="text"],
.kb-form input[type="email"],
.kb-form textarea,
.kb-form select{
  width: min(720px, 100%);
  padding: 8px;
  border: 1px solid var(--kb-border);
  border-radius: 6px;
  background: #fff;
}
.kb-form textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.kb-alert{
  border:1px solid var(--kb-border);
  background:#fff;
  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; }

.kb-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  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: #fafafa;
  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: #fff;
}
.kb-badge.ok{ border-color:#b7eb8f; background:#f6ffed; }
.kb-badge.warn{ border-color:#ffe58f; background:#fffbe6; }

.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: rgba(0,0,0,.04); }
.kb-tree .kb-node.is-active{
  background: rgba(11, 61, 145, 0.08);
}
.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: rgba(0,0,0,.45);
  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 rgba(0,0,0,.55);
  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:#111;
  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; }
.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;
}
.kb-toc .kb-toc-inner h3{
  margin: 10px 0 8px;
  font-size: 14px;
}
.kb-toc .kb-toc-list{
  margin:0;
  padding-left: 18px;
  font-size: 13px;
}
.kb-toc .kb-toc-list li{ margin: 4px 0; }
.kb-toc a{ color: var(--kb-link); text-decoration:none; }
.kb-toc a:hover{ text-decoration:underline; }

/* Article content basics */
.kb-article-content{
  line-height: 1.55;
}
.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:#0b1020;
  color:#e6e6e6;
  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: #fff;
  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: #fafafa;
  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: #fff;
  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:#0b1020;
  color:#e6e6e6;
  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: #fafafa;
  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: #fff;
  color: #111;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}
.kb-props[open]{
  border: 1px solid var(--kb-border);
  background: #fff;
  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: #fff;
  color: #111;
  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;
}

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