/* --- Block component tokens --- */
.pm-editor {
  --pm-border: #00000033;
  --pm-border-subtle: #0000001a;
  --pm-bg-raised: #0000000c;
  --pm-bg-inset: #00000010;
  --pm-bg-subtle: #0000000a;
  --pm-separator: #00000017;
  --pm-pill-bg: #0000001a;
  --pm-hover-bg: #00000010;
  /* Page background — used to mask the bar's border under the active tab.
     Override this from the consuming page if it's not white. */
  --pm-page-bg: #ffffff;

  /* Typography scale — em-relative so it scales with --pm-font-size */
  --pm-text-sm:  0.875em;
  --pm-text-lg:  1.125em;
  --pm-text-xl:  1.375em;  /* h3 */
  --pm-text-2xl: 1.75em;   /* h2 */
  --pm-text-3xl: 2.125em;  /* h1 */

  /* Line heights (unitless) */
  --pm-leading-tight:  1.25;
  --pm-leading-snug:   1.45;
  --pm-leading-normal: 1.7;

  /* Vertical rhythm — em so it scales with font size */
  --pm-space-1: 0.25em;
  --pm-space-2: 0.5em;
  --pm-space-3: 0.75em;
  --pm-space-4: 1em;
  --pm-space-5: 1.25em;
  --pm-space-6: 1.5em;
  --pm-space-8: 2em;
  --pm-space-10: 2.5em;

  /* Font weights */
  --pm-weight-normal:   400;
  --pm-weight-medium:   500;
  --pm-weight-semibold: 600;
  --pm-weight-bold:     700;
}

.dark .pm-editor {
  --pm-border: #ffffff33;
  --pm-border-subtle: #ffffff1a;
  --pm-bg-raised: #ffffff0a;
  --pm-bg-inset: #ffffff10;
  --pm-bg-subtle: #ffffff0a;
  --pm-separator: #ffffff17;
  --pm-pill-bg: #ffffff1a;
  --pm-hover-bg: #ffffff10;
  --pm-page-bg: #1e1e1e;
}

/* --- ProseMirror base reset --- */
.ProseMirror {
  outline: none;
  min-height: 200px;
  font-family: var(--font-sans);
  font-size: var(--pm-font-size, 16px);
  line-height: 1.7;
  color: inherit;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Scroll runway. Editing near the bottom of a document otherwise pins the
   cursor against the viewport edge; this lets the user keep the active
   block in a comfortable position by scrolling further. Suppressed in
   read-only mode and overridden on mobile when the on-screen keyboard
   adds its own padding via inline style. */
.ProseMirror:not(.pm-readonly) {
  padding-bottom: 40vh;
}

/* Each block owns its own bottom margin — no sibling spacing rule */

/* --- Placeholder on empty focused block --- */
.pm-empty-block::before {
  content: attr(data-placeholder);
  pointer-events: none;
  float: left;
  height: 0;
  opacity: 0.35;
}

/* --- Headings --- */
.ProseMirror h1 {
  font-size: var(--pm-text-3xl);
  font-weight: var(--pm-weight-bold);
  line-height: var(--pm-leading-tight);
  margin: 1.2em 0 0.4em;
  letter-spacing: -0.02em;
}

.ProseMirror h2 {
  font-size: var(--pm-text-2xl);
  font-weight: var(--pm-weight-semibold);
  line-height: var(--pm-leading-tight);
  margin: 1.4em 0 0.4em;
  letter-spacing: -0.015em;
}

.ProseMirror h3 {
  font-size: var(--pm-text-xl);
  font-weight: var(--pm-weight-semibold);
  line-height: var(--pm-leading-snug);
  margin: 1.5em 0 0.5em;
}

/* First/last child margin resets — keep editor flush at top/bottom */
.ProseMirror > :first-child {
  margin-top: 0;
}
.ProseMirror > :last-child {
  margin-bottom: 0;
}

/* Container blocks own their padding — last child shouldn't push the box bigger */
.pm-callout-body > :last-child,
.pm-column > :last-child,
.pm-accordion-content-area > div:nth-child(2) > :last-child,
.pm-step-item > div:nth-child(2) > :last-child,
.pm-tabs-content > div > :last-child,
.ProseMirror td > :last-child,
.ProseMirror th > :last-child,
.ProseMirror blockquote > :last-child {
  margin-bottom: 0;
}

/* --- Paragraph --- */
.ProseMirror p {
  margin: 0 0 var(--pm-space-4);
  line-height: var(--pm-leading-normal);
}

/* --- Blockquote --- */
.ProseMirror blockquote {
  position: relative;
  border-left: 4px solid var(--pm-border);
  background: var(--pm-bg-subtle);
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.75em 1.25em 0.75em 1.5em;
  margin: var(--pm-space-6) 0;
  color: inherit;
  font-style: italic;
}
.ProseMirror blockquote::before {
  content: "\201C"; /* left double quote */
  position: absolute;
  left: 0.4em;
  top: -0.1em;
  font-size: 2.4em;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--pm-border);
  pointer-events: none;
}
.ProseMirror blockquote > p {
  /* Slight indent past the decorative quote glyph */
  padding-left: 0.5em;
}

/* --- Code block --- */
.ProseMirror pre.pm-code-block {
  position: relative;
}

.ProseMirror pre {
  background: #0000000a;
  border-radius: 0.5em;
  padding: 0.75em 1em;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: var(--pm-text-sm);
  line-height: 1.6;
  overflow-x: auto;
  margin: 0 0 var(--pm-space-4);
}

.dark .ProseMirror pre {
  background: #ffffff0a;
}

/* --- Code block filename --- */
.pm-code-filename {
  border: none;
  background: transparent;
  color: inherit;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  outline: none;
  opacity: 0;
  width: 0;
  transition: opacity 0.15s, width 0.15s;
  overflow: hidden;
}
.pm-code-block:hover .pm-code-filename,
.pm-code-block.has-filename .pm-code-filename {
  opacity: 0.5;
  width: 10rem;
}
.pm-code-filename:focus {
  opacity: 0.8 !important;
}
.pm-code-filename::placeholder { opacity: 0.5; }

/* --- Code block language picker --- */
.pm-code-lang-wrapper {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  z-index: 5;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.pm-code-lang-btn {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  outline: none;
}

.pm-code-block:hover .pm-code-lang-btn {
  opacity: 0.5;
}

.pm-code-lang-btn:hover,
.pm-code-copy-btn:hover {
  opacity: 0.8 !important;
  background: #00000015;
}

.dark .pm-code-lang-btn:hover,
.dark .pm-code-copy-btn:hover {
  background: #ffffff15;
}

.pm-code-copy-btn {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  outline: none;
  display: flex;
  align-items: center;
}

.pm-code-block:hover .pm-code-copy-btn {
  opacity: 0.5;
}

.pm-code-lang-dropdown {
  position: absolute;
  z-index: 100;
  width: 170px;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid #00000015;
  background: #fff;
  box-shadow: 0 4px 16px #0000001a;
  overflow: hidden;
  font-family: var(--font-sans);
}

.dark .pm-code-lang-dropdown {
  background: #1e1e1e;
  border-color: #ffffff15;
}

.pm-code-lang-search {
  border: none;
  border-bottom: 1px solid #00000008;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  outline: none;
  font-family: var(--font-sans);
}

.dark .pm-code-lang-search {
  border-bottom-color: #ffffff08;
}

.pm-code-lang-list {
  overflow-y: auto;
  padding: 0.25rem;
}

.pm-code-lang-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  padding: 0.3rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.pm-code-lang-item.highlighted,
.pm-code-lang-item:hover {
  background: #0000000a;
}

.dark .pm-code-lang-item.highlighted,
.dark .pm-code-lang-item:hover {
  background: #ffffff0a;
}

.pm-code-lang-item.active {
  color: #d97706;
  font-weight: 600;
}

/* --- Inline code (only outside code blocks) --- */
.ProseMirror :not(pre) > code {
  background: #0000000a;
  border: 1px solid #0000000a;
  border-radius: 0.375em;
  padding: 0.15em 0.4em;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.84em;
  color: #b45309;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.dark .ProseMirror :not(pre) > code {
  background: #ffffff0a;
  border-color: #ffffff0a;
  color: #fbbf24;
}

/* Code inside pre — reset */
.ProseMirror pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* --- Lists --- */
.ProseMirror ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0 0 var(--pm-space-4);
  color: inherit;
}

.ProseMirror ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0 0 var(--pm-space-4);
}

.ProseMirror ul::marker, .ProseMirror ol::marker {
  color: #a8a29e;
}
.dark .ProseMirror ul::marker, .dark .ProseMirror ol::marker {
  color: #57534e;
}

.ProseMirror li {
  margin: var(--pm-space-1) 0;
  line-height: var(--pm-leading-normal);
}

/* Paragraphs inside list items collapse — the li owns the spacing */
.ProseMirror li > p {
  margin: 0;
}

/* Nested lists hug their parent item */
.ProseMirror li > ul,
.ProseMirror li > ol {
  margin: var(--pm-space-1) 0 0;
}

/* --- Horizontal rule --- */
.ProseMirror hr {
  border: none;
  border-top: 1px solid #0000001a;
  margin: var(--pm-space-8) 0;
}

.dark .ProseMirror hr {
  border-top-color: #ffffff15;
}

/* --- Link --- */
.ProseMirror a {
  color: #d97706;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Strikethrough --- */
.ProseMirror s {
  opacity: 0.5;
}

/* --- Selection --- */
.ProseMirror .ProseMirror-selectednode {
  outline: 2px solid #d97706;
  border-radius: 0.25rem;
}

/* --- Gap cursor --- */
.ProseMirror-gapcursor {
  position: relative;
}
.ProseMirror-gapcursor::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid currentColor;
}

/* ========== Callout ========== */
.pm-callout {
  display: flex;
  gap: 0.5em;
  border-radius: 0.5rem;
  padding: 0.75em 1em;
  margin: 0.75em 0;
  border-left: 3px solid;
}

.pm-callout-header { display: flex; align-items: flex-start; padding-top: 0.1em; }
.pm-callout-body { flex: 1; min-width: 0; }
.pm-callout-body > :first-child { margin-top: 0; }

.pm-callout-icon { display: flex; align-items: center; }

.pm-callout-type-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.15rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  outline: none;
}
.pm-callout-type-btn:hover { background: #00000010; }
.dark .pm-callout-type-btn:hover { background: #ffffff10; }

/* Callout type dropdown (floated to body) */
.pm-callout-type-dropdown {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.25rem;
  min-width: 130px;
  border-radius: 0.5rem;
  border: 1px solid #00000015;
  background: #fff;
  box-shadow: 0 4px 16px #0000001a;
  font-family: var(--font-sans);
}
.dark .pm-callout-type-dropdown {
  background: #1e1e1e;
  border-color: #ffffff15;
}

.pm-callout-type-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.pm-callout-type-item:hover { background: #0000000a; }
.dark .pm-callout-type-item:hover { background: #ffffff0a; }
.pm-callout-type-item.active { font-weight: 600; }

.pm-callout-neutral  { background: #0000000a; border-color: #78716c; }
.pm-callout-info     { background: #3b82f610; border-color: #3b82f6; }
.pm-callout-warning  { background: #f59e0b10; border-color: #f59e0b; }
.pm-callout-danger   { background: #ef444410; border-color: #ef4444; }
.pm-callout-success  { background: #22c55e10; border-color: #22c55e; }

.dark .pm-callout-neutral { background: #ffffff08; }
.dark .pm-callout-info    { background: #3b82f615; }
.dark .pm-callout-warning { background: #f59e0b15; }
.dark .pm-callout-danger  { background: #ef444415; }
.dark .pm-callout-success { background: #22c55e15; }

/* ========== Video ========== */
.pm-video { margin: 0.75em 0; }
.pm-video-wrapper { position: relative; border-radius: 0.5rem; overflow: hidden; }
.pm-video-el { display: block; width: 100%; max-height: 500px; border-radius: 0.5rem; background: #000; }
.pm-video-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.pm-video-wrapper:hover .pm-video-toolbar { opacity: 1; }
.pm-video-name {
  font-size: 0.7rem;
  color: #fff;
  background: #00000080;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
}

/* ========== Attachment ========== */
.pm-attachment { margin: 0.75em 0; }
.pm-attachment-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #0000000f;
  border-radius: 0.5rem;
  background: #00000005;
  transition: border-color 0.15s;
}
.pm-attachment-card:hover { border-color: #00000020; }
.dark .pm-attachment-card { border-color: #ffffff0f; background: #ffffff05; }
.dark .pm-attachment-card:hover { border-color: #ffffff20; }

.pm-attachment-icon { flex-shrink: 0; opacity: 0.7; }
.pm-attachment-info { flex: 1; min-width: 0; }
.pm-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  truncate: true;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-attachment-size { font-size: 0.6875rem; opacity: 0.5; margin-top: 0.1rem; }
.pm-attachment-actions { display: flex; gap: 0.25rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.pm-attachment-card:hover .pm-attachment-actions { opacity: 1; }

/* ========== Task List ========== */
.ProseMirror ul[data-task-list],
.ProseMirror ul.pm-task-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--pm-space-4);
}

.ProseMirror .pm-task-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.15em 0;
  margin: 0;
  line-height: var(--pm-leading-normal);
  position: relative;
}

/* Paragraph inside the task content shouldn't add its bottom margin */
.ProseMirror .pm-task-content > p {
  margin: 0;
}

.pm-task-item[data-checked="true"] .pm-task-content {
  opacity: 0.5;
  text-decoration: line-through;
}

.pm-task-checkbox {
  display: flex;
  align-items: center;
  padding-top: 0.15em;
  flex-shrink: 0;
}

.pm-task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 2px solid #d6d3d1;
  border-radius: 5px;
  background: transparent;
  position: relative;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.pm-task-check:active {
  transform: scale(0.9);
}
.pm-task-check.checked {
  background: #d97706;
  border-color: #d97706;
}
.pm-task-check.checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dark .pm-task-check {
  border-color: #57534e;
}
.pm-task-check:hover {
  border-color: #a8a29e;
  background: #0000000a;
}
.pm-task-check.checked:hover {
  background: #b45309;
  border-color: #b45309;
}
.dark .pm-task-check:hover {
  border-color: #78716c;
  background: #ffffff0a;
}
.dark .pm-task-check.checked:hover {
  background: #b45309;
  border-color: #b45309;
}
.pm-task-check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #d9770640;
}

.pm-task-content {
  flex: 1;
  min-width: 0;
}

.pm-task-settings {
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.25em 0.5em;
  border-bottom: 1px solid #0000000a;
  user-select: none;
}
.dark .pm-task-settings { border-color: #ffffff0a; }

.pm-task-settings label {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.7rem;
  opacity: 0.5;
  cursor: pointer;
}

.pm-task-settings input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-brand-500, #6366f1);
}

/* ========== Tabs ========== */
.pm-tabs {
  margin: var(--pm-space-4) 0;
}

.pm-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pm-tab-btn {
  border: 1px solid var(--pm-border);
  border-right: none; /* shared edge with neighbor */
  background: var(--pm-bg-subtle);
  color: inherit;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--pm-weight-medium);
  padding: 0.55rem 1rem 0.6rem;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.65;
  white-space: nowrap;
  position: relative;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

/* Leftmost tab gets a rounded top-left corner */
.pm-tab-btn:first-child {
  border-top-left-radius: 0.5rem;
}

/* The last real tab (sits right before .pm-tab-filler) needs its right border back */
.pm-tab-btn:has(+ .pm-tab-filler) {
  border-right: 1px solid var(--pm-border);
  border-top-right-radius: 0.5rem;
}

.pm-tab-btn:hover {
  opacity: 0.9;
  background: var(--pm-hover-bg);
}

.pm-tab-btn.active {
  opacity: 1;
  background: var(--pm-page-bg);
  border-bottom-color: transparent;
  font-weight: var(--pm-weight-semibold);
}

/* Per-tab close (×) button — only visible on hover or when active */
.pm-tab-btn-label {
  display: inline-flex;
  align-items: center;
}
.pm-tab-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  margin-right: -0.25rem;
  border-radius: 0.25rem;
  opacity: 0;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.pm-tab-btn:hover .pm-tab-close-btn,
.pm-tab-btn.active .pm-tab-close-btn { opacity: 0.5; }
.pm-tab-close-btn:hover {
  opacity: 1 !important;
  background: var(--pm-hover-bg);
  color: #ef4444;
}

/* Drag-and-drop reorder visuals */
.pm-tab-btn.dragging { opacity: 0.4; }
.pm-tab-btn.drag-over {
  background: var(--pm-bg-inset);
  box-shadow: inset 2px 0 0 #d97706;
}

/* Filler "tab" — fills the rest of the row, hosts the +/delete buttons.
   Carries the bottom border so the line continues all the way to the right edge. */
.pm-tab-filler {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  border-bottom: 1px solid var(--pm-border);
  padding: 0 0.25rem 0 0;
  min-width: 2rem;
}

.pm-tab-add-btn {
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.35rem;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-tab-add-btn:hover {
  opacity: 0.9;
  background: var(--pm-hover-bg);
}

.pm-tab-delete-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto; /* push to the right inside .pm-tab-filler */
  border-radius: 0.375rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-tabs:hover .pm-tab-delete-btn { opacity: 0.4; }
.pm-tab-delete-btn:hover {
  opacity: 1 !important;
  color: #ef4444;
  background: var(--pm-hover-bg);
}

.pm-tab-rename-input {
  /* Inherits .pm-tab-btn for the frame; only override the input-specific bits */
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--pm-weight-medium);
  width: 8rem;
  cursor: text;
}
.pm-tab-rename-input:focus {
  background: var(--pm-page-bg);
  opacity: 1;
}

.pm-tabs-content {
  position: relative;
  background: transparent;
  border: 1px solid var(--pm-border);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1em 1.25em;
}

/* Hide all tab panels by default, show only the active one.
   Keyed off data-active-tab on .pm-tabs — we never modify contentDOM children,
   so ProseMirror's DOM sync doesn't interfere. */
.pm-tabs-content > * { display: none; }
.pm-tabs[data-active-tab="0"] > .pm-tabs-content > *:nth-child(1),
.pm-tabs[data-active-tab="1"] > .pm-tabs-content > *:nth-child(2),
.pm-tabs[data-active-tab="2"] > .pm-tabs-content > *:nth-child(3),
.pm-tabs[data-active-tab="3"] > .pm-tabs-content > *:nth-child(4),
.pm-tabs[data-active-tab="4"] > .pm-tabs-content > *:nth-child(5),
.pm-tabs[data-active-tab="5"] > .pm-tabs-content > *:nth-child(6),
.pm-tabs[data-active-tab="6"] > .pm-tabs-content > *:nth-child(7),
.pm-tabs[data-active-tab="7"] > .pm-tabs-content > *:nth-child(8),
.pm-tabs[data-active-tab="8"] > .pm-tabs-content > *:nth-child(9),
.pm-tabs[data-active-tab="9"] > .pm-tabs-content > *:nth-child(10) {
  display: block;
}

.pm-tabs-content > :first-child > :first-child { margin-top: 0; }

/* ========== Accordion ========== */
.pm-accordion {
  border: 1px solid #0000000f;
  border-radius: 0.5rem;
  margin: 0.75em 0;
  background: #00000003;
}

.dark .pm-accordion {
  border-color: #ffffff0f;
  background: #ffffff03;
}

.pm-accordion-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15rem 0.25rem;
}

.pm-accordion-toggle {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: transform 0.15s ease, opacity 0.15s;
  transform: rotate(0deg);
}
.pm-accordion-toggle.expanded { transform: rotate(90deg); }
.pm-accordion-toggle:hover { opacity: 0.8; background: #0000000a; }
.dark .pm-accordion-toggle:hover { background: #ffffff0a; }

.pm-accordion-delete-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.pm-accordion:hover .pm-accordion-delete-btn { opacity: 0.3; }
.pm-accordion-delete-btn:hover { opacity: 0.7 !important; color: #ef4444; }

.pm-accordion-content-area {
  padding: 0 0.75rem 0.5rem;
}

/* accordion_title is the first child */
.pm-accordion-content-area > div:first-child {
  font-weight: 600;
  padding-bottom: 0.25rem;
}

/* accordion_content is the second child */
.pm-accordion-content-area > div:nth-child(2) {
  padding-top: 0.35rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid #00000008;
}

.dark .pm-accordion-content-area > div:nth-child(2) {
  border-top-color: #ffffff08;
}

.pm-accordion-content-area > div:nth-child(2) > :first-child {
  margin-top: 0;
}

/* Collapsed state */
.pm-accordion.collapsed .pm-accordion-content-area > div:nth-child(2) {
  display: none;
}

.pm-accordion.collapsed .pm-accordion-content-area {
  padding-bottom: 0.15rem;
}

/* ========== Tables ========== */
.pm-table-wrapper {
  position: relative;
  margin: 0.75em 0 var(--pm-space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pm-table-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.2rem 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.pm-table-wrapper:hover .pm-table-toolbar,
.pm-table-wrapper:focus-within .pm-table-toolbar { opacity: 1; }

.pm-table-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.pm-table-tool-btn:hover { opacity: 0.9; background: #0000000a; }
.dark .pm-table-tool-btn:hover { background: #ffffff0a; }
.pm-table-tool-btn.danger:hover { color: #ef4444; }

.pm-table-tool-sep {
  width: 1px;
  height: 16px;
  background: #0000000f;
  margin: 0 2px;
}
.dark .pm-table-tool-sep { background: #ffffff0f; }

.pm-table-wrapper > table {
  border-collapse: collapse;
  width: 100%;
  min-width: 500px;
  overflow: hidden;
  border-radius: 0.375rem;
  border: 1px solid var(--pm-border-subtle);
}

.ProseMirror td, .ProseMirror th {
  border: 1px solid var(--pm-border-subtle);
  padding: 0.4em 0.6em;
  vertical-align: top;
  position: relative;
  min-width: 80px;
}

.ProseMirror th {
  background: #00000005;
  font-weight: 600;
  font-size: 0.9em;
  text-align: inherit;
}

.dark .ProseMirror th { background: #ffffff05; }

.ProseMirror td > p, .ProseMirror th > p { margin: 0; }

/* Selected cells */
.ProseMirror .selectedCell {
  background: #d9770620;
}


.ProseMirror.resize-cursor { cursor: col-resize; }

/* ========== Drawing ========== */
.pm-drawing {
  margin: 0.75em 0;
}

.pm-drawing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--pm-border);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--pm-bg-raised);
}

.pm-drawing-label {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pm-drawing-btn-group {
  display: flex;
  gap: 2px;
}

.pm-drawing-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.pm-drawing-tool-btn:hover { opacity: 0.8; background: var(--pm-hover-bg); }
.pm-drawing-tool-btn.danger:hover { color: #ef4444; }

.pm-drawing-wrapper {
  position: relative;
  border: 1px solid var(--pm-border);
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: hidden;
  height: 600px;
  background: var(--pm-bg-subtle);
  outline: none;
}
.pm-drawing-surface { /* extra marker class; sizing comes from the wrapper */ }

.pm-drawing-canvas {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
}

/* Floating tool palette + property panel (inner UI) */
.pm-draw-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pm-draw-toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--pm-page-bg);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px #0000001a;
  pointer-events: auto;
  z-index: 2;
}

.pm-draw-tool {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: background 0.12s, opacity 0.12s;
  padding: 0;
}
.pm-draw-tool:hover { background: var(--pm-hover-bg); opacity: 1; }
.pm-draw-tool.active {
  background: #d9770620;
  color: #d97706;
  opacity: 1;
}

.pm-draw-props {
  position: absolute;
  top: 60px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--pm-page-bg);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px #0000001a;
  pointer-events: auto;
  z-index: 2;
  width: 240px;
  max-height: calc(100% - 130px);
  overflow-y: auto;
  box-sizing: border-box;
}

.pm-draw-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pm-draw-group-label {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pm-draw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.pm-draw-row.pm-draw-slider {
  flex-wrap: nowrap;
}
.pm-draw-row.pm-draw-slider input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  accent-color: #d97706;
}

.pm-draw-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--pm-border);
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: transform 0.08s, box-shadow 0.12s;
  flex: 0 0 auto;
}
.pm-draw-swatch.none {
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    #ef4444,
    transparent calc(50% + 1px)
  ), var(--pm-bg-inset);
}
.pm-draw-swatch.auto {
  background:
    linear-gradient(135deg, #111827 0 50%, #e5e7eb 50% 100%);
}
.pm-draw-swatch.active {
  box-shadow: 0 0 0 2px #d97706;
  transform: scale(1.08);
}

.pm-draw-wbtn {
  min-width: 32px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pm-border);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0 6px;
  flex: 0 0 auto;
  transition: background 0.12s, border-color 0.12s;
}
.pm-draw-wbtn:hover { background: var(--pm-hover-bg); }
.pm-draw-wbtn.active {
  background: #d9770620;
  border-color: #d97706;
  color: #d97706;
}
.pm-draw-fs { font-variant-numeric: tabular-nums; }

.pm-draw-action {
  flex: 1 1 calc(50% - 3px);
  height: 28px;
  padding: 0 8px;
  font-size: 0.72rem;
  border: 1px solid var(--pm-border);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.pm-draw-action:hover { background: var(--pm-hover-bg); }
.pm-draw-action.danger { color: #ef4444; border-color: #ef444440; }
.pm-draw-action.danger:hover { background: #ef444415; }

/* Inline text editor overlay */
.pm-drawing-text-edit {
  z-index: 1000;
  border: 1px dashed #d97706;
  background: #ffffff40;
  padding: 2px;
  outline: none;
  resize: none;
  overflow: hidden;
  white-space: pre;
  box-sizing: content-box;
}
.dark .pm-drawing-text-edit { background: #00000040; }

/* Bottom bar (zoom + scroll-to-content) */
.pm-draw-bottom {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
  z-index: 2;
}

.pm-draw-zoom {
  display: flex;
  align-items: center;
  background: var(--pm-page-bg);
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px #0000001a;
  overflow: hidden;
}

.pm-draw-zoom-btn {
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.7;
  transition: background 0.12s, opacity 0.12s;
}
.pm-draw-zoom-btn:hover { background: var(--pm-hover-bg); opacity: 1; }

.pm-draw-zoom-pct {
  min-width: 44px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid var(--pm-border);
  border-right: 1px solid var(--pm-border);
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.12s;
}
.pm-draw-zoom-pct:hover { opacity: 1; }

.pm-draw-scroll-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-page-bg);
  box-shadow: 0 2px 8px #0000001a;
  color: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.12s, background 0.12s;
}
.pm-draw-scroll-btn:hover { opacity: 1; background: var(--pm-hover-bg); }

/* Fullscreen */
.pm-drawing-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: 0;
  background: var(--pm-page-bg);
}
.pm-drawing-fullscreen .pm-drawing-toolbar { border-radius: 0; }
.pm-drawing-fullscreen > .pm-drawing-wrapper {
  border-radius: 0;
  border: none;
  height: calc(100vh - 2rem);
}

/* ========== Image ========== */
.pm-image {
  margin: 0.75em 0;
}

.pm-image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.pm-image-el {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.pm-image-toolbar {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.pm-image-wrapper:hover .pm-image-toolbar { opacity: 1; }

.pm-image-alt-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: #000000cc;
  color: #fff;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  outline: none;
  backdrop-filter: blur(8px);
}
.pm-image-alt-input::placeholder { color: #ffffff80; }

.pm-image-tool-btn {
  border: none;
  background: #000000cc;
  color: #fff;
  padding: 0.3rem;
  border-radius: 0.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s;
  backdrop-filter: blur(8px);
}
.pm-image-tool-btn.danger:hover { background: #ef4444; }

.pm-image-dropzone {
  border: 2px dashed var(--pm-border);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pm-image-dropzone:hover,
.pm-image-dropzone.dragover {
  border-color: #d97706;
  background: #d9770610;
}

.pm-image-dropzone-icon { opacity: 0.25; }
.pm-image-dropzone-label {
  font-size: 0.8rem;
  opacity: 0.4;
  margin: 0;
}

/* ========== Embed ========== */
.pm-embed {
  margin: 0.75em 0;
  border: 1px solid var(--pm-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.pm-embed-input-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
}

.pm-embed-input-icon { opacity: 0.2; flex-shrink: 0; }

.pm-embed-url-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  outline: none;
}
.pm-embed-url-input::placeholder { opacity: 0.35; }

.pm-embed-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--pm-bg-raised);
  border-bottom: 1px solid var(--pm-border-subtle);
  font-size: 0.7rem;
}

.pm-embed-label {
  font-weight: 600;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.pm-embed-link {
  flex: 1;
  min-width: 0;
  color: inherit;
  opacity: 0.35;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.65rem;
}
.pm-embed-link:hover { opacity: 0.7; text-decoration: underline; }

.pm-embed-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.2rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pm-embed-tool-btn:hover { opacity: 0.7; }
.pm-embed-tool-btn.danger:hover { color: #ef4444; }

.pm-embed-iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}

.pm-embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.pm-embed-fallback {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.4;
}

.pm-embed-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: 0;
  border-radius: 0;
  background: white;
}
.dark .pm-embed-fullscreen { background: #1e1e1e; }
.pm-embed-fullscreen .pm-embed-toolbar { border-radius: 0; }
.pm-embed-fullscreen .pm-embed-iframe-wrap { padding-bottom: 0; height: calc(100vh - 2rem); }
.pm-embed-fullscreen .pm-embed-iframe { position: static; height: 100%; }

/* ========== Mermaid ========== */
.pm-mermaid {
  border: 1px solid var(--pm-border);
  border-radius: 0.5rem;
  margin: 0.75em 0;
}

.pm-mermaid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--pm-border-subtle);
  background: var(--pm-bg-raised);
}

.pm-mermaid-label {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pm-mermaid-btn-group { display: flex; gap: 2px; }

.pm-mermaid-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.pm-mermaid-tool-btn:hover { opacity: 0.8; background: var(--pm-hover-bg); }
.pm-mermaid-tool-btn.danger:hover { color: #ef4444; }

.pm-mermaid-source {
  width: 100%;
  min-height: 150px;
  border: none;
  border-bottom: 1px solid var(--pm-border-subtle);
  background: var(--pm-bg-subtle);
  color: inherit;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 0.75em 1em;
  resize: vertical;
  outline: none;
}

.pm-mermaid-preview {
  padding: 1em;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}
.pm-mermaid-preview svg { max-width: 100%; height: auto; }

.pm-mermaid-empty,
.pm-mermaid-error {
  font-size: 0.8rem;
  opacity: 0.4;
  text-align: center;
  margin: 0;
  padding: 1em;
}
.pm-mermaid-error { color: #ef4444; opacity: 0.7; }

/* ========== File Tree ========== */
.pm-file-tree {
  border: 1px solid var(--pm-border);
  border-radius: 0.5rem;
  margin: 0.75em 0;
}

.pm-file-tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--pm-border-subtle);
  background: var(--pm-bg-raised);
}

.pm-file-tree-label {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pm-file-tree-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  line-height: 0;
}
.pm-file-tree-tool-btn:hover { opacity: 0.8; background: var(--pm-hover-bg); }
.pm-file-tree-tool-btn.danger:hover { color: #ef4444; }

.pm-file-tree-source {
  width: 100%;
  min-height: 120px;
  border: none;
  border-bottom: 1px solid var(--pm-border-subtle);
  background: var(--pm-bg-subtle);
  color: inherit;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 0.5em 0.75em;
  resize: vertical;
  outline: none;
}

.pm-file-tree-items {
  padding: 0.5em 0;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.8;
}

.pm-file-tree-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.05rem 0.5rem;
}
.pm-file-tree-row.highlighted {
  background: var(--pm-bg-inset);
}
.pm-file-tree-row.highlighted .pm-file-tree-name {
  font-weight: 600;
}

.pm-file-tree-icon {
  display: flex;
  align-items: center;
  opacity: 0.5;
  flex-shrink: 0;
}

.pm-file-tree-name {
  white-space: nowrap;
}

/* ========== Steps ========== */
.pm-steps {
  margin: 1em 0;
  position: relative;
}

.pm-steps-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.pm-steps:hover .pm-steps-toolbar { opacity: 1; }

.pm-steps-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.pm-steps-tool-btn:hover { opacity: 0.8; background: var(--pm-hover-bg); }
.pm-steps-tool-btn.danger:hover { color: #ef4444; }

.pm-steps-content {
  counter-reset: pm-step;
  padding-left: 2rem;
  border-left: 2px solid var(--pm-border);
  margin-left: 0.7rem;
}

.pm-step-item {
  counter-increment: pm-step;
  position: relative;
  padding: 0 0 1.5em 1rem;
}

.pm-step-item:last-child {
  padding-bottom: 0.25em;
}

/* Numbered dot on the timeline */
.pm-step-item::before {
  content: counter(pm-step);
  position: absolute;
  left: -2.7rem;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #44403c;
  color: #fafaf9;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dark .pm-step-item::before {
  background: #d6d3d1;
  color: #1c1917;
}

/* Step title */
.pm-step-item > div:first-child {
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.4rem;
  margin-bottom: 0.25em;
}

/* Step content */
.pm-step-item > div:nth-child(2) {
  opacity: 0.85;
}

.pm-step-item > div:nth-child(2) > :first-child {
  margin-top: 0;
}

/* ========== Columns ========== */
.pm-columns-wrapper {
  margin: 0.75em 0;
  position: relative;
}

.pm-columns-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.pm-columns-wrapper:hover .pm-columns-toolbar { opacity: 1; }

.pm-columns-tool-btn {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  line-height: 0;
}
.pm-columns-tool-btn:hover { opacity: 0.8; background: var(--pm-hover-bg); }
.pm-columns-tool-btn.danger:hover { color: #ef4444; }

.pm-columns {
  display: grid;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--pm-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Column count drives the layout — equal-width columns on desktop */
.pm-columns[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.pm-columns[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-columns[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-columns[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-columns[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pm-columns[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.pm-column {
  min-width: 0; /* allow grid items to shrink below content size */
  padding: 0.625rem 0.875rem;
}
/* Single separator line between columns */
.pm-column + .pm-column {
  border-left: 1px solid var(--pm-border);
}
.pm-column > :first-child { margin-top: 0; }
.pm-column > :last-child { margin-bottom: 0; }

/* Responsive: once viewport is too narrow for side-by-side, stack everything */
@media (max-width: 720px) {
  .pm-columns[data-count="2"],
  .pm-columns[data-count="3"],
  .pm-columns[data-count="4"],
  .pm-columns[data-count="5"],
  .pm-columns[data-count="6"] {
    grid-template-columns: minmax(0, 1fr);
  }
  /* When stacked, separator becomes horizontal */
  .pm-column + .pm-column {
    border-left: none;
    border-top: 1px solid var(--pm-border);
  }
}

/* ========== Block handle (Notion-style hover menu) ========== */
.pm-block-handle {
  position: absolute;
  left: -1.75rem;
  width: 2.25rem;        /* extends past the button to overlap the editor edge */
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 0.75rem; /* invisible bridge into the editor area */
  pointer-events: auto;
  z-index: 5;
}

/* Hide the floating left handle on touch devices — bubble menu has the + button instead */
@media (hover: none) {
  .pm-block-handle { display: none; }
}

.pm-block-handle-btn {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.3rem;
  border: 1px solid var(--pm-border);
  background: var(--pm-bg-raised);
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.pm-block-handle-btn:hover {
  opacity: 1;
  background: var(--pm-hover-bg);
  border-color: var(--pm-border-strong, var(--pm-border));
}

.pm-block-handle-fade-enter-active,
.pm-block-handle-fade-leave-active {
  transition: opacity 0.12s ease;
}
.pm-block-handle-fade-enter-from,
.pm-block-handle-fade-leave-to {
  opacity: 0;
}

/* ========== Note Link ========== */
.pm-note-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  background: var(--pm-bg-inset);
  border: 1px solid var(--pm-border);
  border-radius: 0.35em;
  padding: 0.05em 0.45em;
  font-size: 0.9em;
  color: #d97706;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: baseline;
  line-height: 1.4;
}
.pm-note-link:hover {
  background: #d9770612;
  border-color: #d9770630;
}
.dark .pm-note-link:hover {
  background: #d9770618;
  border-color: #d9770640;
}
.pm-note-link-icon {
  display: flex;
  align-items: center;
  opacity: 0.6;
}

/* ===== Cards ===== */

/* .pm-cards-wrap is the editor-only wrapper that hosts the grid + the
   "Add card" button. All visible block spacing comes from .pm-cards so the
   rule stays identical to the static-site CSS. */
.pm-cards-wrap {
  display: block;
}
.pm-cards {
  display: grid;
  /* Cap at 3 columns: each column must be at least 220px wide OR a third of
     the container minus the two gaps, whichever is larger. On wide screens
     that third-of-container wins so we never exceed 3 columns; on narrow
     screens the 220px floor kicks in and we drop to 2 or 1 cards per row. */
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(220px, calc((100% - 2 * var(--pm-space-4)) / 3)), 1fr)
  );
  gap: var(--pm-space-4);
  margin: var(--pm-space-4) 0;
}
.pm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pm-bg-subtle);
  border: 1px solid var(--pm-border-subtle);
  border-radius: 0.6rem;
  overflow: hidden;
  transition: border-color 0.12s;
}
/* Link-style cards: neutralize the global .ProseMirror a colour/underline
   rule (higher specificity wins) and subtly hint clickability via border. */
a.pm-card,
a.pm-card:hover {
  color: inherit;
  text-decoration: none;
}
.pm-card:hover {
  border-color: var(--pm-border);
}

.pm-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--pm-bg-inset);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pm-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-card-cover-empty {
  border-bottom: 1px dashed var(--pm-border-subtle);
}
.pm-card-cover-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  opacity: 0.5;
}
.pm-card-cover-uploading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.pm-card-body {
  padding: 0.7em 0.9em 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.pm-card-title {
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.3;
  outline: none;
}
.pm-card-title.pm-empty-block::before,
.pm-card-description.pm-empty-block::before {
  content: attr(data-placeholder);
  color: currentColor;
  opacity: 0.35;
  pointer-events: none;
}
.pm-card-description {
  font-size: 0.85em;
  line-height: 1.45;
  opacity: 0.75;
  outline: none;
}

.pm-card-actions {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  display: flex;
  gap: 0.2em;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 2;
}
.pm-card:hover .pm-card-actions {
  opacity: 1;
}
.pm-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.pm-card-action:hover {
  background: rgba(0, 0, 0, 0.75);
}
.pm-card-delete:hover {
  background: #dc2626;
}

.pm-card-link-chip {
  position: absolute;
  bottom: 0.5em;
  right: 0.6em;
  max-width: 70%;
  padding: 0.15em 0.5em;
  font-size: 0.72em;
  background: var(--pm-bg-raised);
  border: 1px solid var(--pm-border-subtle);
  border-radius: 0.35rem;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  z-index: 2;
}
.pm-card-link-chip.visible {
  opacity: 0.85;
  pointer-events: auto;
}

.pm-cards-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
  margin-top: var(--pm-space-3);
}
.pm-cards-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.7em;
  border: 1px dashed var(--pm-border);
  background: transparent;
  border-radius: 0.4rem;
  font-size: 0.8em;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.12s, border-color 0.12s;
}
.pm-cards-add:hover {
  opacity: 1;
  border-color: currentColor;
}
.pm-cards-add-icon {
  display: inline-flex;
}
.pm-cards-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.7em;
  border: 1px dashed var(--pm-border);
  background: transparent;
  border-radius: 0.4rem;
  font-size: 0.8em;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.pm-cards-delete-btn:hover {
  opacity: 1;
  color: #ef4444;
  border-color: #ef4444;
}

/* ===== Note picker (floating) ===== */

.pm-note-picker {
  position: absolute;
  z-index: 9999;
  min-width: 280px;
  max-width: 360px;
  background: var(--pm-bg);
  color: inherit;
  border: 1px solid var(--pm-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.35em;
  font-size: 0.9em;
}
.dark .pm-note-picker,
[data-theme="dark"] .pm-note-picker {
  background: #1c1917;
}
.pm-note-picker-tabs {
  display: flex;
  gap: 0.15em;
  padding: 0 0.15em 0.35em;
  border-bottom: 1px solid var(--pm-border-subtle);
  margin-bottom: 0.35em;
}
.pm-note-picker-tab {
  padding: 0.25em 0.75em;
  border: none;
  border-radius: 0.3rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  opacity: 0.6;
}
.pm-note-picker-tab:hover {
  background: var(--pm-bg-inset);
}
.pm-note-picker-tab.active {
  opacity: 1;
  background: var(--pm-bg-inset);
  font-weight: 600;
}
.pm-note-picker-input {
  width: 100%;
  padding: 0.4em 0.6em;
  background: transparent;
  border: 1px solid var(--pm-border-subtle);
  border-radius: 0.35rem;
  color: inherit;
  font: inherit;
  font-size: 0.9em;
  outline: none;
}
.pm-note-picker-input:focus {
  border-color: var(--pm-border);
}
.pm-note-picker-results {
  max-height: 240px;
  overflow-y: auto;
  margin-top: 0.35em;
}
.pm-note-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.4em 0.55em;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.88em;
  text-align: left;
  border-radius: 0.3rem;
  cursor: pointer;
}
.pm-note-picker-item:hover,
.pm-note-picker-item.active {
  background: var(--pm-bg-inset);
}
.pm-note-picker-icon {
  display: inline-flex;
  opacity: 0.55;
  flex-shrink: 0;
}
.pm-note-picker-text {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
  flex: 1;
}
.pm-note-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-note-picker-path {
  font-size: 0.75em;
  opacity: 0.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-note-picker-empty,
.pm-note-picker-hint {
  padding: 0.5em 0.55em;
  font-size: 0.82em;
  opacity: 0.55;
}

/* Kribble Static Site — Layout & site-specific styles only.
   All editor content block styles come from editor-content.css (shared with the app).
   Inter and JetBrains Mono are loaded via <link> in the HTML <head> (see templates.go). */

/* --kb-brand, --kb-light-bg, --kb-dark-bg are injected per-site via a <style>
   tag in the HTML <head>. The defaults below are fallbacks only. */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --kb-brand: #d97706;
  --kb-light-bg: #f8f7f5;
  --kb-dark-bg: #1e1e1e;
  --color-brand-500: var(--kb-brand);
  --pm-font-size: 16px;
  --kb-sidebar-bg: #f0eee9;
  --kb-light-text: #1c1917;
  --kb-dark-text: #e7e5e4;
  --kb-brand-text: var(--kb-brand);
}
.dark {
  --kb-sidebar-bg: #262626;
  --kb-brand-text: color-mix(in srgb, var(--kb-brand) 60%, #fff);
}

/* Page background propagated to .pm-editor for the active-tab seam mask */
.pm-editor { --pm-page-bg: var(--kb-light-bg); }
.dark .pm-editor { --pm-page-bg: var(--kb-dark-bg); }

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

/* Scrollbar styling — matches the app */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #a8a29e40; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e80; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--pm-font-size);
  line-height: 1.7;
  color: var(--kb-light-text);
  background: var(--kb-light-bg);
}
.dark body { color: var(--kb-dark-text); background: var(--kb-dark-bg); }

/* Content wrapper — uses .ProseMirror class so editor CSS applies directly */
.kb-content { width: 100%; }

/* Override editor-content.css hardcoded brand colors with theme variable.
   Exclude linked cards — their whole surface is the link; text inside
   should read as normal body text, not as brand-coloured link text. */
.ProseMirror a:not(.pm-card) { color: var(--kb-brand-text); }
.ProseMirror a.pm-card,
.ProseMirror a.pm-card * { color: inherit; text-decoration: none; }
.ProseMirror blockquote { border-left-color: color-mix(in srgb, var(--kb-brand) 50%, transparent); }
.ProseMirror .pm-mention { color: var(--kb-brand-text); }
.ProseMirror .pm-checkbox:checked { background: var(--kb-brand); border-color: var(--kb-brand); }
.ProseMirror .pm-tab-btn.active { color: var(--kb-brand-text); border-bottom-color: var(--kb-brand); }
.ProseMirror .pm-note-link { color: var(--kb-brand-text); }

/* Code block with filename — renders a tab-like header above the code.
   Backgrounds match shiki's GitHub light/dark theme colors. */
.pm-code-wrap {
  margin: 0.75em 0;
}
.pm-code-filename-tab {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem 0.4rem;
  border: 1px solid #d0d7de;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #ffffff;
  color: #57606a;
  position: relative;
  top: 1px;
  z-index: 1;
}
.dark .pm-code-filename-tab {
  background: #24292e;
  border-color: #30363d;
  color: #8b949e;
}
/* All code blocks share the same border + GitHub theme background. */
.pm-code-block {
  border: 1px solid #d0d7de;
  background: #ffffff;
}
.dark .pm-code-block {
  border-color: #30363d;
  background: #24292e;
}
/* Code block under a filename tab: flat top-left corner so the tab sits flush */
.pm-code-wrap > .pm-code-block {
  margin-top: 0;
  border-top-left-radius: 0;
}

/* Code copy button (added by site.js) */
.pm-code-copy {
  position: absolute; top: 0.5rem; right: 0.5rem;
  border: none; background: #00000020; color: inherit;
  padding: 0.3rem 0.5rem; border-radius: 0.3rem;
  font-size: 0.65rem; font-family: var(--font-sans);
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.dark .pm-code-copy { background: #ffffff20; }
.pm-code-block:hover .pm-code-copy { opacity: 0.6; }
.pm-code-copy:hover { opacity: 1 !important; }

/* Drawing light/dark toggle */
.pm-drawing-static { display: flex; justify-content: center; padding: 1em; overflow-x: auto; }
.pm-drawing-static svg { max-width: 100%; height: auto; }
.pm-drawing-dark { display: none; }
.dark .pm-drawing-light { display: none; }
.dark .pm-drawing-dark { display: block; }

/* ===== Layout ===== */
.kb-layout {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.kb-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid #00000008;
  background: var(--kb-light-bg);
}
.dark .kb-header { border-bottom-color: #ffffff08; background: var(--kb-dark-bg); }

.kb-header-left {
  display: flex; align-items: center; gap: 0.75rem;
}
.kb-header-right {
  display: flex; align-items: center; gap: 0.5rem;
}

.kb-brand {
  display: flex; align-items: center; gap: 0.6rem;
}
@media (min-width: 769px) {
  .kb-brand { margin-left: 1.25rem; }
}
.kb-brand-icon {
  width: 28px; height: 28px; flex-shrink: 0;
}
.kb-brand-name {
  font-size: 1.05rem; font-weight: 400; letter-spacing: -0.01em;
}

.kb-body {
  display: flex; flex: 1;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .kb-header { padding: 0.6rem 1rem; }
  .kb-body { padding: 0; }
}

.kb-sidebar {
  position: sticky; top: var(--kb-header-h, 3.5rem); height: calc(100vh - var(--kb-header-h, 3.5rem));
  width: 16rem; flex-shrink: 0;
  padding: 0.75rem 0;
}
.kb-sidebar-inner {
  height: 100%;
  background: var(--kb-sidebar-bg);
  border: 1px solid #0000000a;
  border-radius: 0.75rem;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
}
.dark .kb-sidebar-inner { border-color: #ffffff0a; }

.kb-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; }

.kb-sidebar-badge {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: auto; padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--kb-brand) 30%, transparent); border-radius: 0.5rem;
  font-size: 0.75rem; font-weight: 600;
  color: var(--kb-brand-text); text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.kb-sidebar-badge:hover { border-color: var(--kb-brand); background: color-mix(in srgb, var(--kb-brand) 6%, transparent); }

.kb-main {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column;
}

/* ===== Top-bar tabs (when group_root_folders_as_tabs is enabled) =====
   Sits directly below the sticky header. Each tab is a real <a> link to
   that section's first page — no JavaScript involved. The horizontal
   scrolling behavior gives us free responsivity on narrow screens. */
.kb-topbar {
  position: sticky;
  top: var(--kb-header-h, 2.85rem);  /* below .kb-header */
  z-index: 9;
  border-bottom: 1px solid #00000010;
  background: var(--kb-light-bg);
}
.dark .kb-topbar { border-bottom-color: #ffffff10; background: var(--kb-dark-bg); }

.kb-topbar-inner {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;       /* Firefox */
}
.kb-topbar-inner::-webkit-scrollbar { display: none; }

.kb-topbar-tab {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.kb-topbar-tab:hover { opacity: 0.85; }
.kb-topbar-tab.active {
  opacity: 1;
  font-weight: 600;
  color: var(--kb-brand-text);
  border-bottom-color: var(--kb-brand);
}

@media (max-width: 768px) {
  .kb-topbar { top: 0; position: relative; }
  .kb-topbar-inner { padding: 0 1rem; }
}

/* ===== Language / Version Switchers =====
   Styled as compact <select> dropdowns in the header bar, between the
   search button and the theme toggle. */
.kb-header-switchers {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Styled to match .kb-search-btn — same height, border, radius, bg. */
.kb-switcher {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #0000001a;
  background-color: #00000006;
  border-radius: 0.5rem;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px 12px;
}
.dark .kb-switcher {
  border-color: #ffffff15;
  background-color: #ffffff06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.kb-switcher:hover { border-color: #00000030; background-color: #0000000a; }
.dark .kb-switcher:hover { border-color: #ffffff25; background-color: #ffffff0a; }
.kb-switcher:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 1px; }
.kb-switcher option { background: #fff; color: #1c1917; }
.dark .kb-switcher option { background: #262626; color: #e7e5e4; }

.kb-page-row {
  display: flex; flex: 1;
}
.kb-page {
  padding: 2rem 2.5rem; flex: 1;
  min-width: 0; max-width: calc(100% - 14rem);
}
/* Offset headings for sticky header when navigating via TOC anchors */
/* Anchor jumps need to clear the sticky header (+ topbar, when present).
   --kb-sticky-offset is set in pixels by site.js after measuring; the CSS
   fallback covers no-JS and the brief moment before the script runs.
   The +1rem gives the heading a bit of breathing room. */
.kb-content h1, .kb-content h2, .kb-content h3 {
  scroll-margin-top: calc(var(--kb-sticky-offset, 3rem) + 1rem);
}

.kb-page-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.25rem; }
/* Specificity bump — .ProseMirror p { margin: 0 } from editor-content.css would otherwise win */
.ProseMirror .kb-page-desc,
p.kb-page-desc { font-size: 0.875rem; opacity: 0.5; margin: 0 0 1rem; }

/* TOC — sticky on the right */
.kb-toc {
  position: sticky;
  /* --kb-sticky-offset is measured at runtime by site.js (header + topbar
     heights). The CSS fallback covers the no-JS case and the brief moment
     before site.js runs. */
  top: var(--kb-sticky-offset, 3rem);
  max-height: calc(100vh - var(--kb-sticky-offset, 3rem));
  width: 14rem; flex-shrink: 0;
  align-self: flex-start;
  overflow-y: auto; padding: 1.5rem 1rem 1.5rem 0;
}
.kb-toc-toggle { display: none; }
.kb-toc-list {
  list-style: none; padding: 0; margin: 0;
}
.kb-toc-item { position: relative; }
.kb-toc-link {
  display: block; padding: 0.25rem 0 0.25rem 0.75rem;
  font-size: 0.75rem; color: inherit; text-decoration: none;
  opacity: 0.45; transition: opacity 0.15s, color 0.15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-toc-link:hover { opacity: 0.8; }

/* Level-1 headings: prominent, no left rule, extra top spacing */
.kb-toc-item[data-level="1"] { margin-top: 0.6rem; }
.kb-toc-item[data-level="1"]:first-child { margin-top: 0; }
.kb-toc-item[data-level="1"] > .kb-toc-link {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--color-text, inherit); opacity: 0.9;
  padding-left: 0;
}
.kb-toc-item[data-level="1"] > .kb-toc-link:hover {
  color: var(--kb-brand-text); opacity: 1;
}

/* Nested levels: dim with left guide rule */
.kb-toc-item:not([data-level="1"]) {
  border-left: 1px solid #00000014;
}
.dark .kb-toc-item:not([data-level="1"]) { border-left-color: #ffffff14; }

.kb-footer {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-top: 1px solid #0000000f; padding: 1.5rem;
  font-size: 0.75rem; color: var(--kb-brand-text); opacity: 0.4;
}
.dark .kb-footer { border-top-color: #ffffff14; }
.kb-footer a { text-decoration: none; color: inherit; }
.kb-footer:hover { opacity: 0.7; }

/* ===== Sidebar nav ===== */
.kb-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.kb-nav li { margin: 0; padding: 0; }
.kb-nav-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.65rem; border-radius: 0.5rem;
  font-size: 0.875rem; text-decoration: none; color: inherit;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.kb-nav-item:hover { background: #00000008; }
.dark .kb-nav-item:hover { background: #ffffff08; }
.kb-nav-item.active {
  background: color-mix(in srgb, var(--kb-brand) 7%, transparent); color: var(--kb-brand-text); font-weight: 600;
}
.kb-nav-icon { flex-shrink: 0; opacity: 0.7; }
.kb-nav-item.active .kb-nav-icon { opacity: 1; }
.kb-topbar-tab .kb-nav-icon { opacity: 0.8; }
.kb-topbar-tab.active .kb-nav-icon { opacity: 1; }
.kb-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kb-nav-group { margin-top: 0; }
.kb-nav-group:first-child { margin-top: 0; }
.kb-nav-group-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  width: 100%; border: none; background: transparent; color: inherit;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
  padding: 0.45rem 0.65rem; border-radius: 0.5rem;
  cursor: pointer; text-align: left; transition: background 0.15s;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.kb-nav-group-toggle:hover { background: #00000008; }
.dark .kb-nav-group-toggle:hover { background: #ffffff08; }
.kb-nav-group-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-nav-chevron { flex-shrink: 0; opacity: 0.35; margin-left: auto; transition: transform 0.15s ease; }
.kb-nav-group.expanded > .kb-nav-group-toggle > .kb-nav-chevron { transform: rotate(90deg); }
.kb-nav-nested {
  padding-left: 0.85rem; margin-left: 0.6rem;
  border-left: 1px solid #00000010; overflow: hidden;
  max-height: 0; transition: max-height 0.2s ease;
}
.dark .kb-nav-nested { border-left-color: #ffffff10; }
.kb-nav-group.expanded > .kb-nav-nested { max-height: 200rem; }

/* ===== Theme toggle ===== */
.kb-theme-toggle {
  border: none; background: transparent; color: inherit;
  padding: 0.35rem; border-radius: 0.375rem; cursor: pointer;
  opacity: 0.4; transition: opacity 0.15s;
  display: flex; align-items: center; margin-left: auto;
}
.kb-theme-toggle:hover { opacity: 0.7; }

/* .kb-brand styles are above in the header section */

/* ===== Search ===== */
.kb-search-btn {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid #0000001a; background: #00000006; color: inherit;
  font-family: var(--font-sans); font-size: 0.8rem;
  padding: 0.45rem 1rem; border-radius: 0.5rem; cursor: pointer;
  flex: 1; max-width: 28rem;
  transition: border-color 0.15s, background 0.15s;
}
.kb-search-btn:hover { border-color: #00000030; background: #0000000a; }
.dark .kb-search-btn { border-color: #ffffff15; background: #ffffff06; }
.dark .kb-search-btn:hover { border-color: #ffffff25; background: #ffffff0a; }
.kb-search-btn svg { opacity: 0.3; flex-shrink: 0; }
.kb-search-btn kbd {
  font-family: var(--font-sans); font-size: 0.65rem; opacity: 0.4;
  background: #0000000a; padding: 0.1rem 0.35rem; border-radius: 0.2rem; border: 1px solid #0000000a;
  margin-left: auto;
}
.dark .kb-search-btn kbd { background: #ffffff0a; border-color: #ffffff0a; }
.kb-search-btn span { opacity: 0.4; }
.kb-search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #00000040; backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: min(20vh, 120px);
}
.kb-search-modal {
  width: 100%; max-width: 560px; margin: 0 1rem;
  background: #fff; border: 1px solid #0000001a;
  border-radius: 0.75rem; box-shadow: 0 16px 48px #00000020; overflow: hidden;
}
.dark .kb-search-modal { background: var(--kb-dark-bg); border-color: #ffffff15; }
.kb-search-input-wrap {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid #0000000a;
}
.dark .kb-search-input-wrap { border-bottom-color: #ffffff0a; }
.kb-search-input-wrap svg { flex-shrink: 0; opacity: 0.3; }
.kb-search-input {
  flex: 1; border: none; background: transparent; color: inherit;
  font-family: var(--font-sans); font-size: 0.95rem; outline: none;
}
.kb-search-input::placeholder { opacity: 0.35; }
.kb-search-esc {
  font-family: var(--font-sans); font-size: 0.6rem; opacity: 0.3;
  background: #0000000a; padding: 0.15rem 0.4rem; border-radius: 0.2rem; border: 1px solid #0000000a;
}
.dark .kb-search-esc { background: #ffffff0a; border-color: #ffffff0a; }
.kb-search-results { max-height: 400px; overflow-y: auto; padding: 0.25rem; }
.kb-search-result {
  display: block; width: 100%; text-decoration: none; color: inherit;
  padding: 0.6rem 0.75rem; border-radius: 0.5rem; transition: background 0.1s;
}
.kb-search-result:hover { background: #00000008; text-decoration: none; }
.dark .kb-search-result:hover { background: #ffffff08; }
.kb-search-result.active { background: color-mix(in srgb, var(--kb-brand) 7%, transparent); text-decoration: none; }
.dark .kb-search-result.active { background: color-mix(in srgb, var(--kb-brand) 13%, transparent); }
.kb-search-result-path {
  font-size: 0.7rem;
  color: #00000080;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .kb-search-result-path { color: #ffffff80; }
.kb-search-result-path-sep { margin: 0 0.3rem; opacity: 0.5; }
.kb-search-result-title { font-size: 0.9rem; font-weight: 600; color: #000000e0; }
.dark .kb-search-result-title { color: #ffffffe6; }
.kb-search-result.active .kb-search-result-title { color: var(--kb-brand-text); }
.kb-search-result-desc { font-size: 0.75rem; color: #00000099; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .kb-search-result-desc { color: #ffffff99; }
.kb-search-result-snippet { font-size: 0.78rem; line-height: 1.45; color: #000000aa; margin-top: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .kb-search-result-snippet { color: #ffffffaa; }
.kb-search-result-snippet mark { background: rgba(217,119,6,0.28); color: inherit; font-weight: 600; border-radius: 0.15rem; padding: 0 0.15rem; }
.dark .kb-search-result-snippet mark { background: rgba(217,119,6,0.4); color: #ffe9c9; }
.kb-search-snippet-label { display: inline-block; color: var(--kb-brand-text); font-weight: 700; margin-right: 0.15rem; }
.kb-search-empty { text-align: center; padding: 2rem 1rem; font-size: 0.8rem; opacity: 0.4; }

@media (max-width: 640px) {
  .kb-search-btn { max-width: none; flex: 0 0 auto; padding: 0.45rem; }
  .kb-search-btn span, .kb-search-btn kbd { display: none; }
  .kb-search-modal { margin: 0 0.5rem; }
}

/* ===== Mobile ===== */
.kb-mobile-nav-btn {
  display: none; border: none; background: transparent; color: inherit;
  padding: 0.35rem; border-radius: 0.375rem; cursor: pointer; opacity: 0.4; transition: opacity 0.15s;
}
.kb-mobile-nav-btn:hover { opacity: 0.7; }

/* Desktop: drawer + backdrop are hidden entirely. */
.kb-mobile-nav,
.kb-mobile-nav-backdrop { display: none; }

/* TOC hides on medium screens */
@media (max-width: 1200px) {
  .kb-toc { display: none; }
  .kb-page { max-width: 100%; }
}

/* Sidebar collapses to hamburger on tablet */
@media (max-width: 768px) {
  .kb-sidebar { display: none; }
  .kb-mobile-nav-btn { display: flex; align-items: center; }
  .kb-page { padding: 1.5rem 1rem; }
  .kb-toc { display: none; }

  /* Slide-in left drawer. */
  .kb-mobile-nav {
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 82vw);
    padding: 1rem;
    background: var(--kb-sidebar-bg);
    border-right: 1px solid #00000008;
    z-index: 60;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    box-shadow: none;
  }
  .dark .kb-mobile-nav {
    background: var(--kb-sidebar-bg);
    border-right-color: #ffffff08;
  }
  .kb-mobile-nav.open {
    transform: translateX(0);
    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
  }

  .kb-mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease-out;
    z-index: 55;
  }
  .kb-mobile-nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  body.kb-mobile-nav-open {
    overflow: hidden;
  }
}