/* What documents look like: the editor's content, and the HTML the server
   renders for published sites and PDFs (a copy of this file is embedded in
   backend/internal/format/render). The editor's own controls are in
   editor-ui.css. */

/* --- Block component tokens (also for the editor's menus and popups,
   which sit outside the document) --- */
.pm-editor, .pm-editor-frame, .pm-note-picker {
  --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;
  --pm-border-faint: #0000000f;
  --pm-border-hover: #00000020;
  --pm-bg-faint: #00000005;
  --pm-bg-faintest: #00000003;
  --pm-separator-faint: #00000008;
  /* Colours with a meaning: the accent (links to notes, done tasks),
     inline code, list markers, checkboxes, step numbers, callout tones. */
  --pm-accent: #d97706;
  --pm-accent-soft: #d9770612;
  --pm-accent-border: #d9770630;
  --pm-code-fg: #b45309;
  --pm-marker: #a8a29e;
  --pm-check-border: #d6d3d1;
  --pm-check-hover-border: #a8a29e;
  --pm-step-bg: #44403c;
  --pm-step-fg: #fafaf9;
  --pm-callout-info-bg: #3b82f610;
  --pm-callout-warning-bg: #f59e0b10;
  --pm-callout-danger-bg: #ef444410;
  --pm-callout-success-bg: #22c55e10;
  /* 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, .dark .pm-editor-frame, .dark .pm-note-picker {
  --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-border-faint: #ffffff0f;
  --pm-border-hover: #ffffff20;
  --pm-bg-faint: #ffffff05;
  --pm-bg-faintest: #ffffff03;
  --pm-separator-faint: #ffffff08;
  --pm-accent-soft: #d9770618;
  --pm-accent-border: #d9770640;
  --pm-code-fg: #fbbf24;
  --pm-marker: #57534e;
  --pm-check-border: #57534e;
  --pm-check-hover-border: #78716c;
  --pm-step-bg: #d6d3d1;
  --pm-step-fg: #1c1917;
  --pm-callout-info-bg: #3b82f615;
  --pm-callout-warning-bg: #f59e0b15;
  --pm-callout-danger-bg: #ef444415;
  --pm-callout-success-bg: #22c55e15;
  --pm-page-bg: var(--color-surface-800, #1e1e1e);
}

/* --- ProseMirror base reset --- */
.ProseMirror {
  outline: none;
  min-height: 200px;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  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;
}

/* --- Headings --- */
/* Hosts can give headings their own typeface (the web app uses a serif);
   by default they're in the body font. */
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3 {
  font-family: var(--pm-heading-font, inherit);
  font-variation-settings: var(--pm-heading-variation, normal);
}

.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: var(--pm-bg-subtle);
  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);
}


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


/* 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 li::marker {
  color: var(--pm-marker);
}

.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 var(--pm-border-subtle);
  margin: var(--pm-space-8) 0;
}


/* --- Link --- */
.ProseMirror a {
  color: var(--pm-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* ========== 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-icon { color: #78716c; }
.pm-callout-icon[data-tone="info"] { color: #3b82f6; }
.pm-callout-icon[data-tone="warning"] { color: #f59e0b; }
.pm-callout-icon[data-tone="danger"] { color: #ef4444; }
.pm-callout-icon[data-tone="success"] { color: #22c55e; }

.pm-callout-info     { background: var(--pm-callout-info-bg); border-color: #3b82f6; }
.pm-callout-warning  { background: var(--pm-callout-warning-bg); border-color: #f59e0b; }
.pm-callout-danger   { background: var(--pm-callout-danger-bg); border-color: #ef4444; }
.pm-callout-success  { background: var(--pm-callout-success-bg); border-color: #22c55e; }


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

/* ========== 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 var(--pm-border-faint);
  border-radius: 0.5rem;
  background: var(--pm-bg-faint);
  transition: border-color 0.15s;
}
.pm-attachment-card:hover { border-color: var(--pm-border-hover); }

.pm-attachment-icon { flex-shrink: 0; opacity: 0.7; }
.pm-attachment-icon { color: #78716c; }
.pm-attachment-icon[data-ext="pdf"] { color: #ef4444; }
.pm-attachment-icon:is([data-ext="doc"], [data-ext="docx"]) { color: #3b82f6; }
.pm-attachment-icon:is([data-ext="xls"], [data-ext="xlsx"]) { color: #22c55e; }
.pm-attachment-icon:is([data-ext="ppt"], [data-ext="pptx"]) { color: #f59e0b; }
.pm-attachment-icon:is([data-ext="zip"], [data-ext="rar"], [data-ext="7z"]) { color: #8b5cf6; }
.pm-attachment-info { flex: 1; min-width: 0; }
.pm-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-attachment-size { font-size: 0.6875rem; opacity: 0.5; margin-top: 0.1rem; }

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

/* Lists in a task follow its text without a gap after them; a nested task
   list keeps its tasks where they are (no "move checked" setting). */
.ProseMirror .pm-task-content > :is(ul, ol) {
  margin-bottom: 0;
}

/* A done task's own text, not the tasks nested in it. */
.pm-task-item[data-checked="true"] > .pm-task-content > :first-child {
  opacity: 0.5;
  text-decoration: line-through;
}

/* As tall as one line of the task's text, so the box sits centred on the
   first line however the text wraps. */
.pm-task-checkbox {
  display: flex;
  align-items: center;
  height: calc(var(--pm-leading-normal) * 1em);
  flex-shrink: 0;
}

.pm-task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 2px solid var(--pm-check-border);
  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: var(--pm-accent);
  border-color: var(--pm-accent);
}
.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);
}
.pm-task-check:hover {
  border-color: var(--pm-check-hover-border);
  background: var(--pm-bg-subtle);
}
.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;
}

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

/* 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-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. Up to 32 tabs. */
.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),
.pm-tabs[data-active-tab="10"] > .pm-tabs-content > *:nth-child(11),
.pm-tabs[data-active-tab="11"] > .pm-tabs-content > *:nth-child(12),
.pm-tabs[data-active-tab="12"] > .pm-tabs-content > *:nth-child(13),
.pm-tabs[data-active-tab="13"] > .pm-tabs-content > *:nth-child(14),
.pm-tabs[data-active-tab="14"] > .pm-tabs-content > *:nth-child(15),
.pm-tabs[data-active-tab="15"] > .pm-tabs-content > *:nth-child(16),
.pm-tabs[data-active-tab="16"] > .pm-tabs-content > *:nth-child(17),
.pm-tabs[data-active-tab="17"] > .pm-tabs-content > *:nth-child(18),
.pm-tabs[data-active-tab="18"] > .pm-tabs-content > *:nth-child(19),
.pm-tabs[data-active-tab="19"] > .pm-tabs-content > *:nth-child(20),
.pm-tabs[data-active-tab="20"] > .pm-tabs-content > *:nth-child(21),
.pm-tabs[data-active-tab="21"] > .pm-tabs-content > *:nth-child(22),
.pm-tabs[data-active-tab="22"] > .pm-tabs-content > *:nth-child(23),
.pm-tabs[data-active-tab="23"] > .pm-tabs-content > *:nth-child(24),
.pm-tabs[data-active-tab="24"] > .pm-tabs-content > *:nth-child(25),
.pm-tabs[data-active-tab="25"] > .pm-tabs-content > *:nth-child(26),
.pm-tabs[data-active-tab="26"] > .pm-tabs-content > *:nth-child(27),
.pm-tabs[data-active-tab="27"] > .pm-tabs-content > *:nth-child(28),
.pm-tabs[data-active-tab="28"] > .pm-tabs-content > *:nth-child(29),
.pm-tabs[data-active-tab="29"] > .pm-tabs-content > *:nth-child(30),
.pm-tabs[data-active-tab="30"] > .pm-tabs-content > *:nth-child(31),
.pm-tabs[data-active-tab="31"] > .pm-tabs-content > *:nth-child(32) {
  display: block;
}

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

/* ========== Accordion ========== */
.pm-accordion {
  border: 1px solid var(--pm-border-faint);
  border-radius: 0.5rem;
  margin: 0.75em 0;
  background: var(--pm-bg-faintest);
}


.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: var(--pm-bg-subtle); }

.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 var(--pm-separator-faint);
}


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

/* Separate borders so the rounded outline isn't clipped. Without stored
   widths the table view balances the columns itself (fitColumns in
   blocks/table/widths.ts); .pm-table-fixed is set while widths apply. */
.pm-table-wrapper > table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 0.375rem;
  border: 1px solid var(--pm-border-subtle);
}
.pm-table-wrapper > table.pm-table-fixed { table-layout: fixed; }

.ProseMirror td, .ProseMirror th {
  border: 0;
  border-right: 1px solid var(--pm-border-subtle);
  border-bottom: 1px solid var(--pm-border-subtle);
  padding: 0.4em 0.6em;
  vertical-align: top;
  position: relative;
  min-width: 3em;
  overflow-wrap: break-word;
}
.ProseMirror td:last-child, .ProseMirror th:last-child { border-right: 0; }
.ProseMirror tr:last-child > td, .ProseMirror tr:last-child > th { border-bottom: 0; }

/* Measuring passes for the automatic layout: everything on one line, then
   every column as narrow as its longest word. */
.pm-table-wrapper > table.pm-table-measure-max,
.pm-table-wrapper > table.pm-table-measure-min {
  table-layout: auto !important;
  min-width: 0 !important;
}
.pm-table-wrapper > table.pm-table-measure-max { width: max-content !important; }
.pm-table-wrapper > table.pm-table-measure-min { width: 0 !important; }
.pm-table-measure-max col, .pm-table-measure-min col { width: auto !important; }
.pm-table-measure-max td, .pm-table-measure-max th { white-space: nowrap !important; }
.pm-table-measure-max td *, .pm-table-measure-max th * { white-space: nowrap !important; }

.ProseMirror th {
  background: var(--pm-bg-faint);
  font-weight: 600;
  font-size: 0.9em;
  text-align: inherit;
}


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


/* ========== Drawing ========== */
.pm-drawing {
  margin: 0.75em 0;
  position: relative;
  --pm-draw-accent: var(--pm-accent);
  --pm-draw-accent-soft: #d977061f;
  --pm-draw-float: var(--pm-page-bg);
  --pm-draw-shadow: 0 1px 2px #0000000f, 0 4px 14px #00000014;
}
.dark .pm-drawing {
  --pm-draw-accent: #f0a03a;
  --pm-draw-accent-soft: #f0a03a26;
  --pm-draw-float: #222222;
  --pm-draw-shadow: 0 1px 2px #00000040, 0 6px 18px #00000059;
}

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

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

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

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

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

.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[style*="--depth"] { padding-left: calc(var(--depth) * 1.25rem + 0.5rem); }
.pm-file-tree-icon.folder { color: var(--pm-accent); opacity: 1; }
.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-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: var(--pm-step-bg);
  color: var(--pm-step-fg);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

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

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

/* Equal-width columns side by side, however many there are */
.pm-columns { grid-auto-flow: column; grid-auto-columns: 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; }

/* Responsive: once viewport is too narrow for side-by-side, stack everything */
@media (max-width: 720px) {
  .pm-columns { grid-auto-flow: row; }
  /* When stacked, separator becomes horizontal */
  .pm-column + .pm-column {
    border-left: none;
    border-top: 1px solid var(--pm-border);
  }
}

/* ========== 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: var(--pm-accent);
  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: var(--pm-accent-soft);
  border-color: var(--pm-accent-border);
}
.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-body {
  flex: 1;
  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-description {
  font-size: 0.85em;
  line-height: 1.45;
  opacity: 0.75;
  outline: none;
}

/* Kribble Static Site — Layout & site-specific styles only.
   All editor content block styles come from editor-content.css (shared with the app).
   Fonts are loaded via <link> in the HTML <head> (see templates.go). The site
   speaks the app's three voices: Inter for text, Fraunces for titles and
   headings, IBM Plex Mono for metadata. */

/* --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;
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-meta: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --kb-brand: #d97706;
  --kb-light-bg: #fffdf9;
  --kb-dark-bg: #151515;
  --color-brand-500: var(--kb-brand);
  --pm-font-size: 16px;
  --kb-sidebar-bg: #f4efe6;
  --kb-light-text: #1c1917;
  --kb-dark-text: #dcdcda;
  --kb-brand-text: var(--kb-brand);
  --kb-muted: #78716c;
  --kb-faint: #a8a29e;
  --kb-rule: rgba(28, 25, 23, 0.08);
  --kb-hover: rgba(28, 25, 23, 0.045);
}
.dark {
  --kb-sidebar-bg: #101010;
  --kb-brand-text: color-mix(in srgb, var(--kb-brand) 60%, #fff);
  --kb-muted: #a3a3a0;
  --kb-faint: #8c8c8a;
  --kb-rule: rgba(255, 255, 255, 0.07);
  --kb-hover: rgba(255, 255, 255, 0.05);
}

/* Headings in the content are in the display serif, as in the app. */
.pm-editor {
  --pm-heading-font: var(--font-display);
  --pm-heading-variation: "SOFT" 50, "opsz" 72;
}

/* 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); }
::selection { background: color-mix(in oklab, var(--kb-brand) 30%, transparent); }

/* 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-task-check.checked,
.ProseMirror .pm-task-check.checked:hover { background: var(--kb-brand); border-color: var(--kb-brand); }
.ProseMirror .pm-task-check { cursor: default; pointer-events: none; }
.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.
   Light: shiki's GitHub light background. Dark: the editor's own code
   background, under GitHub's dark 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: #ffffff0a;
  border-color: #ffffff12;
  color: #a8a29e;
}
/* 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: #ffffff12;
  background: #ffffff0a;
}
/* 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 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Content width: the sidebar, page and table of contents stay together in
     the middle of wide screens; the header bar and the sidebar's tint still
     reach the edges. */
  --kb-max: 90rem;
  --kb-gutter: max(0px, calc((100vw - var(--kb-max)) / 2));
}

.kb-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem calc(1.5rem + var(--kb-gutter, 0px)) 0.7rem calc(1rem + var(--kb-gutter, 0px));
  border-bottom: 1px solid var(--kb-rule);
  background: color-mix(in srgb, var(--kb-light-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.dark .kb-header { background: color-mix(in srgb, var(--kb-dark-bg) 88%, transparent); }

.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-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "opsz" 72;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em;
}

.kb-body {
  display: flex; flex: 1;
  width: 100%; max-width: var(--kb-max, none); margin: 0 auto;
}

@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: 17rem; flex-shrink: 0;
  background: var(--kb-sidebar-bg);
  border-right: 1px solid var(--kb-rule);
}
/* Wider than the column, the page's color fills both margins: the sidebar
   keeps just its hairline, so the column doesn't sit beside a slab of tint. */
@media (min-width: 90rem) {
  .kb-sidebar { background: transparent; }
}
.kb-sidebar-inner {
  height: 100%;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
}

.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 var(--kb-rule);
  background: var(--kb-light-bg);
}
.dark .kb-topbar { background: var(--kb-dark-bg); }
/* Its underline runs on to the screen's right edge, like the header's. */
.kb-topbar::after {
  content: ""; position: absolute; left: 100%; bottom: -1px;
  width: var(--kb-gutter, 0px); border-bottom: 1px solid var(--kb-rule); pointer-events: none;
}

.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: var(--kb-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.kb-topbar-tab:hover { color: var(--kb-light-text); }
.dark .kb-topbar-tab:hover { color: var(--kb-dark-text); }
.kb-topbar-tab.active {
  color: var(--kb-light-text);
  font-weight: 600;
  border-bottom-color: var(--kb-brand);
}
.kb-topbar-tab.active .kb-nav-icon { color: var(--kb-brand-text); }

@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: 2.75rem 3rem 4rem; flex: 1;
  min-width: 0; max-width: calc(100% - 14rem);
}
.kb-page > .kb-content { max-width: 46rem; margin: 0 auto; }
/* 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);
}

.ProseMirror h1.kb-page-title {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "opsz" 72;
  font-size: 2.6rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
/* Specificity bump — .ProseMirror p { margin: 0 } from editor-content.css would otherwise win */
.ProseMirror .kb-page-desc,
p.kb-page-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem; line-height: 1.5;
  color: var(--kb-muted);
  margin: 0 0 1.5rem;
}
/* The line above the title: where the page sits and when it changed. */
.ProseMirror .kb-page-meta,
p.kb-page-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem;
  margin: 0 0 1.75rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--kb-rule);
  font-family: var(--font-meta);
  font-size: 10.5px; line-height: 1.6; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--kb-faint);
}
.kb-page-meta-path { color: var(--kb-muted); }
.kb-page-meta-sep { margin: 0 0.5rem; opacity: 0.6; }
.kb-page-meta > .kb-page-meta-sep { margin: 0; }

/* Page actions: at the end of the meta line (site.js). */
.kb-page-actions {
  position: relative; margin-left: auto; display: inline-flex; align-items: stretch;
  text-transform: none; letter-spacing: 0; font-family: var(--font-sans, Inter, system-ui, sans-serif);
}
.kb-page-actions button {
  font: inherit; color: var(--kb-muted); background: none; cursor: pointer;
  border: 1px solid var(--kb-rule);
}
.kb-pa-main {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.55rem; font-size: 0.72rem !important; font-weight: 500;
  border-radius: 0.4rem 0 0 0.4rem;
}
.kb-pa-toggle {
  display: inline-flex; align-items: center; padding: 0 0.35rem;
  border-left: none !important; border-radius: 0 0.4rem 0.4rem 0;
}
.kb-pa-main:hover, .kb-pa-toggle:hover, .kb-pa-toggle[aria-expanded="true"] { background: var(--kb-hover); color: var(--kb-light-text); }
.dark .kb-pa-main:hover, .dark .kb-pa-toggle:hover, .dark .kb-pa-toggle[aria-expanded="true"] { color: var(--kb-dark-text); }
.kb-pa-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; width: 19rem;
  padding: 0.3rem; border-radius: 0.65rem; background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.1);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 14px 36px -10px rgba(28, 25, 23, 0.22);
  color: var(--kb-light-text);
}
.dark .kb-pa-menu {
  background: #1f1f1f; border-color: rgba(255, 255, 255, 0.09); color: var(--kb-dark-text);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.7);
}
.kb-pa-menu[hidden] { display: none; }
.kb-pa-item, .kb-pa-agent {
  display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: 0.45rem; text-decoration: none !important; color: inherit !important;
}
.kb-page-actions .kb-pa-item { border: none; color: inherit; }
.kb-pa-item:hover { background: var(--kb-hover); }
.kb-pa-item b, .kb-pa-agent b { font-size: 0.8rem; font-weight: 600; }
.kb-pa-item span, .kb-pa-agent span { font-size: 0.72rem; color: var(--kb-muted); line-height: 1.45; }
.kb-pa-agent { margin-top: 0.2rem; padding-top: 0.6rem; border-top: 1px solid var(--kb-rule); border-radius: 0; gap: 0.35rem; }
.kb-pa-agent a { color: var(--kb-brand-text); }
.kb-pa-cmd {
  display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.35rem 0.35rem 0.55rem;
  border-radius: 0.4rem; background: rgba(28, 25, 23, 0.05);
}
.dark .kb-pa-cmd { background: rgba(255, 255, 255, 0.06); }
.kb-pa-cmd code {
  flex: 1; min-width: 0; font-family: var(--font-meta); font-size: 0.68rem; line-height: 1.5;
  overflow-wrap: anywhere; background: none !important; padding: 0 !important;
  border: none !important; color: inherit !important; font-weight: 400;
}
.kb-pa-agent code.kb-pa-inline {
  font-family: var(--font-meta); font-size: 0.66rem; background: none !important; border: none !important;
  padding: 0 !important; color: inherit !important; overflow-wrap: anywhere;
}
.kb-page-actions .kb-pa-cmd button { border: none; padding: 0.25rem; border-radius: 0.3rem; display: inline-flex; }
.kb-page-actions .kb-pa-cmd button:hover { background: var(--kb-hover); }
@media (max-width: 640px) {
  .kb-pa-main span { display: none; }
  .kb-pa-menu { width: min(19rem, calc(100vw - 2rem)); }
}

/* 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);
  width: 14rem; flex-shrink: 0;
  align-self: flex-start;
  padding: 1.5rem 1rem 1.5rem 0;
}
.kb-toc-scroll {
  max-height: calc(100vh - var(--kb-sticky-offset, 3rem) - 3rem);
  overflow-y: auto;
  overflow-anchor: none;
}
.kb-toc * {
  overflow-anchor: none;
}
.kb-toc > .kb-toc-list {
  max-height: calc(100vh - var(--kb-sticky-offset, 3rem) - 3rem);
  overflow-y: auto;
  overflow-anchor: none;
}
.kb-toc-toggle { display: none; }
.kb-toc-list {
  list-style: none; padding: 0; margin: 0;
}
.kb-toc-item { position: relative; }
.kb-toc-num {
  /* The gap keeps long numbers (3.0.1) off headings that carry their own
     numbering ("1. Create…"). */
  display: inline-block; min-width: 1.9rem; margin-right: 0.375rem;
  font-family: var(--font-meta); font-size: 0.6875rem; font-weight: 400;
  opacity: 0.65;
}
.kb-toc-link {
  display: block; padding: 0.25rem 0 0.25rem 0.75rem;
  font-size: 0.75rem; color: var(--kb-muted); text-decoration: none;
  transition: color 0.15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-toc-link:hover { color: var(--kb-light-text); }
.dark .kb-toc-link:hover { color: var(--kb-dark-text); }
.kb-toc-link.active {
  color: var(--kb-brand-text);
  opacity: 1;
}

/* 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: 500;
  color: inherit;
  padding-left: 0;
}
.kb-toc-item[data-level="1"] > .kb-toc-link:hover {
  color: var(--kb-brand-text); opacity: 1;
}
.kb-toc-item[data-level="1"] > .kb-toc-link.active {
  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;
}
.kb-toc-item.active:not([data-level="1"]) {
  border-left-color: color-mix(in srgb, var(--kb-brand) 55%, transparent);
}
.dark .kb-toc-item:not([data-level="1"]) { border-left-color: #ffffff14; }
.dark .kb-toc-item.active:not([data-level="1"]) {
  border-left-color: color-mix(in srgb, var(--kb-brand) 70%, #fff);
}

.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 {
  position: relative;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.38rem 0.65rem; border-radius: 0.5rem;
  font-size: 0.84rem; text-decoration: none; color: inherit;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.kb-nav-item:hover { background: var(--kb-hover); }
/* The open page: a sheet lifted off the sidebar, with a bookmark ribbon. */
.kb-nav-item.active {
  background: var(--kb-light-bg); font-weight: 500;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08), 0 0 0 1px rgba(28, 25, 23, 0.05);
}
.kb-nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 14px; translate: 0 -50%;
  border-radius: 0 3px 3px 0; background: var(--kb-brand);
}
.dark .kb-nav-item.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; color: #fafaf9; }
.kb-nav-item.active .kb-nav-icon { color: var(--kb-brand-text); }
.kb-nav-icon { flex-shrink: 0; opacity: 0.55; }
.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.84rem; font-weight: 500;
  padding: 0.38rem 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: var(--kb-hover); }
.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 { color: var(--kb-faint); 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 { color: var(--kb-muted); }
.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: 600px; margin: 0 1rem;
  display: flex; flex-direction: column; max-height: min(640px, calc(100dvh - 2rem));
  background: #fff; border: 1px solid #0000001a;
  border-radius: 0.9rem; box-shadow: 0 16px 48px #00000020; overflow: hidden;
}
.kb-search-modal.has-preview { max-width: 940px; }
.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.8rem 1rem; border-bottom: 1px solid #00000010;
}
.dark .kb-search-input-wrap { border-bottom-color: #ffffff12; }
.kb-search-input-wrap svg { flex-shrink: 0; opacity: 0.45; }
.kb-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; color: inherit;
  font-family: var(--font-sans); font-size: 0.95rem; outline: none;
}
.kb-search-input::placeholder { opacity: 0.45; }
.kb-search-esc {
  font-family: var(--font-meta); font-size: 0.6rem; opacity: 0.5;
  background: #0000000a; padding: 0.15rem 0.4rem; border-radius: 0.25rem; border: 1px solid #0000000f;
}
.dark .kb-search-esc { background: #ffffff0a; border-color: #ffffff12; }

/* Operator chips, as the search read them */
.kb-search-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem 1rem; border-bottom: 1px solid #00000010; }
.dark .kb-search-chips { border-bottom-color: #ffffff12; }
.kb-search-chips[hidden], .kb-search-keys[hidden], .kb-search-preview[hidden] { display: none; }
.kb-search-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%;
  font-family: var(--font-meta); font-size: 0.68rem; line-height: 1.5;
  padding: 0.05rem 0.35rem 0.05rem 0.55rem; border-radius: 999px; cursor: default;
  color: color-mix(in srgb, var(--kb-brand-text) 85%, #000);
  background: color-mix(in srgb, var(--kb-brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--kb-brand) 22%, transparent);
}
.dark .kb-search-chip { color: var(--kb-brand-text); background: color-mix(in srgb, var(--kb-brand) 16%, transparent); }
.kb-search-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-search-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem;
  border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: 0.6; cursor: pointer; padding: 0;
}
.kb-search-chip button:hover { opacity: 1; background: #0000000d; }
.kb-search-chip.is-error { color: #b91c1c; background: #dc262614; border-color: #dc262633; }
.dark .kb-search-chip.is-error { color: #fca5a5; background: #dc262626; }
button.kb-search-chip { padding: 0.1rem 0.55rem; cursor: pointer; }
button.kb-search-chip:hover { border-color: color-mix(in srgb, var(--kb-brand) 45%, transparent); }

.kb-search-body { display: flex; min-height: 0; flex: 1; }
.kb-search-results { flex: 1; min-width: 0; max-height: 440px; overflow-y: auto; padding: 0.3rem; }
.has-preview .kb-search-results { flex: 0 0 46%; border-right: 1px solid #00000010; }
.dark .has-preview .kb-search-results { border-right-color: #ffffff12; }
.kb-search-group {
  margin: 0; padding: 0.45rem 0.75rem 0.25rem; font-family: var(--font-meta);
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-faint);
}
.kb-search-result {
  display: flex; gap: 0.7rem; align-items: flex-start; width: 100%; text-decoration: none; color: inherit;
  padding: 0.6rem 0.75rem; border-radius: 0.55rem; transition: background 0.08s;
}
.kb-search-result:hover { text-decoration: none; }
.kb-search-result.active { background: color-mix(in srgb, var(--kb-brand) 8%, transparent); }
.dark .kb-search-result.active { background: color-mix(in srgb, var(--kb-brand) 14%, transparent); }
.kb-search-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-top: 0.05rem;
  border-radius: 0.5rem; background: #0000000a; color: var(--kb-muted);
}
.dark .kb-search-icon { background: #ffffff0d; }
.kb-search-suggest { align-items: center; }
.kb-search-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kb-search-result-path {
  display: flex; gap: 0.75rem; margin: 0 0 0.15rem; font-family: var(--font-meta);
  font-size: 0.63rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kb-muted);
}
.kb-search-path-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-search-ago { margin-left: auto; flex-shrink: 0; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .kb-search-result-title { color: #ffffffe6; }
.kb-search-result-desc { font-size: 0.78rem; font-style: italic; color: #00000099; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .kb-search-result-desc { color: #ffffff99; }
.kb-search-suggest .kb-search-result-desc { font-style: normal; }
.kb-search-heading {
  display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; min-width: 0;
  font-size: 0.76rem; color: #000000b0;
}
.dark .kb-search-heading { color: #ffffffb8; }
.kb-search-heading svg { flex-shrink: 0; color: var(--kb-faint); }
.kb-search-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-search-result-snippet {
  font-size: 0.76rem; line-height: 1.5; color: #00000099; margin-top: 0.25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-search-one-line { -webkit-line-clamp: 1; }
.dark .kb-search-result-snippet { color: #ffffff99; }
.kb-search-section { flex-direction: column; gap: 0; padding: 0.35rem 0.75rem 0.4rem 3.45rem; }
.kb-search-section .kb-search-heading { margin-top: 0; }
.kb-search-modal mark { background: rgba(217,119,6,0.24); color: inherit; font-weight: 600; border-radius: 0.15rem; padding: 0; box-shadow: 0 0 0 1px rgba(217,119,6,0.24); }
.dark .kb-search-modal mark { background: rgba(217,119,6,0.38); color: #ffe9c9; }
.kb-search-empty { text-align: center; padding: 2rem 1rem; font-size: 0.82rem; color: var(--kb-muted); }
.kb-search-examples { border-top: 1px solid #0000000d; margin-top: 0.3rem; padding: 0.5rem 0.45rem 0.4rem; }
.dark .kb-search-examples { border-top-color: #ffffff10; }
.kb-search-examples > div { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.1rem 0.3rem; }

/* Preview of the highlighted result (wide screens) */
.kb-search-preview { flex: 1; min-width: 0; max-height: 440px; overflow-y: auto; padding: 1.1rem 1.4rem; }
.kb-search-preview h2 { margin: 0.1rem 0 0; font-family: var(--font-display, var(--font-sans)); font-size: 1.3rem; line-height: 1.25; font-weight: 600; color: #000000e6; }
.dark .kb-search-preview h2 { color: #ffffffeb; }
.kb-search-preview-meta { margin: 0.3rem 0 0; font-family: var(--font-meta); font-size: 0.65rem; color: var(--kb-faint); }
.kb-search-preview-desc { margin: 0.5rem 0 0; font-style: italic; font-size: 0.85rem; color: var(--kb-muted); }
.kb-search-preview-body { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.6; color: #000000b8; }
.dark .kb-search-preview-body { color: #ffffffbf; }
.kb-search-preview-body p { margin: 0 0 0.45rem; }
.kb-search-preview-section { padding: 0.15rem 0 0.15rem 0.7rem; border-left: 2px solid transparent; margin-bottom: 0.4rem; }
.kb-search-preview-section.is-target { border-left-color: var(--kb-brand); }
/* The page itself in the preview: the site's own styles, a size smaller. */
.kb-search-preview-page { margin-top: 0.9rem; padding: 0; zoom: 0.85; }
.kb-search-preview-page mark { border-radius: 3px; }
.kb-search-preview-heading { font-weight: 650; color: #000000e0; }
.dark .kb-search-preview-heading { color: #ffffffe6; }

.kb-search-keys {
  display: flex; gap: 1rem; padding: 0.5rem 1rem; border-top: 1px solid #00000010;
  font-family: var(--font-meta); font-size: 0.63rem; color: var(--kb-faint);
}
.dark .kb-search-keys { border-top-color: #ffffff12; }
.kb-search-keys kbd {
  font-family: var(--font-meta); font-size: 0.6rem; padding: 0.05rem 0.3rem; margin-right: 0.15rem;
  border: 1px solid #00000014; border-radius: 0.25rem; background: #00000006;
}
.dark .kb-search-keys kbd { border-color: #ffffff18; background: #ffffff08; }
.kb-search-keys-end { margin-left: auto; }
@media (max-width: 640px) { .kb-search-keys { display: none; } }

/* The heading a link (or a search result) leads to, briefly lit */
@keyframes kb-flash { 0%, 30% { background: color-mix(in srgb, var(--kb-brand) 18%, transparent); } 100% { background: transparent; } }
.kb-flash { animation: kb-flash 2.2s ease-out; border-radius: 0.3rem; }

@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%);
    /* Closed, it's hidden as well as off-screen: some mobile browsers slide
       it in and out once while the page loads. It hides only after the
       slide-out ends, and shows at once when opened. */
    visibility: hidden;
    transition: transform 0.22s ease-out, visibility 0s linear 0.22s;
    box-shadow: none;
  }
  .dark .kb-mobile-nav {
    background: var(--kb-sidebar-bg);
    border-right-color: #ffffff08;
  }
  .kb-mobile-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.22s ease-out, visibility 0s;
    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;
    visibility: hidden;
    transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;
    z-index: 55;
  }
  .kb-mobile-nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.22s ease-out, visibility 0s;
  }

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

.dark .kb-topbar-tab.active { color: var(--kb-dark-text); }