/* ============================================================
   PAGE EDITOR / BLOCKS (recovered from james.css, retokenised)
   ============================================================ */
/* Page options menu (fixed top-right) */
.kb-page-menu {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.kb-page-menu__lock-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--muted);
  padding: 5px var(--sp-4);
  border-radius: 6px;
  letter-spacing: .3px;
  transition: background 0.1s, color 0.1s;
}
.kb-page-menu__lock-btn:hover { background: var(--rail); color: var(--ink-2); }
.kb-page-menu__lock-btn--active { color: tomato; }
.kb-page-menu__lock-btn--active:hover { background: tomato; color: white; }
.kb-page-menu__trigger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 6px;
  letter-spacing: 2px;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}
.kb-page-menu__trigger:hover { background: var(--rail); color: var(--ink-2); }
.kb-page-menu__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: var(--sp-2);
  min-width: 160px;
}
.kb-page-menu__option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  border-radius: 6px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-5);
  line-height: 1.4;
  transition: background 0.1s;
  text-decoration: none;
}
.kb-page-menu__option svg { flex-shrink: 0; opacity: .7; }
.kb-page-menu__option:hover { background: var(--rail); }
.kb-page-menu__option--danger { color: var(--red); }
.kb-page-menu__option--danger:hover { background: var(--red-soft); }

/* "Only you" badge on a personal page's header. */
.pg-vis-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-4); border-radius: var(--sp-4);
  font-size: var(--fs-3); font-weight: 600; white-space: nowrap;
  color: var(--amber); background: var(--amber-soft);
}
.pg-vis-chip svg { flex: none; }

/* Share dialog contents */
.kb-share__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 1.125rem;
  margin: 0 0 var(--sp-4);
  color: var(--ink-2);
}
.kb-share__title svg { opacity: .7; }
.kb-share__hint {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.kb-share__link {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: 18px;
}
.kb-share__url {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4) 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.kb-share__copy {
  flex-shrink: 0;
  padding: var(--sp-4) 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-2);
  transition: background 0.1s;
}
.kb-share__copy:hover { background: var(--rail); }
.kb-share__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kb-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s;
}
.kb-share__btn svg { opacity: .8; }
.kb-share__btn:hover { background: var(--rail); }
.kb-share__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.kb-share__btn--primary:hover { background: var(--accent-2); }
.kb-share__btn--danger { color: var(--red); }
.kb-share__btn--danger:hover { background: var(--red-soft); }

/* Confirmation dialog (replaces native window.confirm) */
.kb-confirm { z-index: 800; }
.kb-confirm__dialog { max-width: 400px; }
.kb-confirm__message {
  margin: var(--sp-2) 0 22px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.kb-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* Empty page prompt */
.kb-empty-page { position: relative; margin-top: var(--sp-4); }
.kb-empty-page__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: var(--sp-3) var(--sp-1);
  border-radius: 6px;
  transition: color 0.1s;
}
.kb-empty-page__btn:hover { color: var(--ink-2); }
.kb-empty-page__picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: var(--sp-2);
  min-width: 160px;
  z-index: 100;
}

/* Blocks list */
.kb-blocks { display: flex; flex-direction: column; }

/* Individual block */
.kb-block {
  position: relative;
  display: flex;
  border-radius: 6px;
  padding: var(--sp-1) 0;
  transition: background 0.1s;
}
.kb-block--image_gallery { align-items: flex-start; }
.kb-block--dragging { opacity: 0.4; }
.kb-block--dragging .kb-block__side-actions { opacity: 0 !important; }
.kb-page--locked .kb-block__side-actions { opacity: 0 !important; pointer-events: none; }
.kb-block { margin-bottom: 10px; }

/* Extra breathing room above headings — but not when the heading is the
   very first block on the page. */
.kb-block--heading1:not(:first-child),
.kb-block--heading2:not(:first-child),
.kb-block--heading3:not(:first-child),
.kb-block--heading4:not(:first-child) { margin-top: 26px; }

.kb-drop-marker {
  height: 0;
  overflow: visible;
  pointer-events: none;
  position: relative;
  margin: 0;
}
.kb-drop-marker::before {
  content: '';
  display: block;
  position: absolute;
  inset-inline: 0;
  top: -5px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
}

/* Side actions — sit in the left margin, outside the page content area */
.kb-block__side-actions {
  flex-shrink: 0;
  width: 3rem;
  margin-left: -3rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-right: var(--sp-2);
  opacity: 0;
  transition: opacity 0.1s;
  white-space: nowrap;
}
.kb-block:hover .kb-block__side-actions,
.kb-block__side-actions:has(.kb-block__actions-menu:not([hidden])),
.kb-block__side-actions:has(.kb-block__type-picker:not([hidden])) { opacity: 1; }

/* Headings have taller first lines than text — nudge the controls down to match */
.kb-block--heading1 .kb-block__side-actions { padding-top: var(--sp-3); }
.kb-block--heading2 .kb-block__side-actions { padding-top: 3px; }
.kb-block--heading3 .kb-block__side-actions { padding-top: 1px; }

.kb-block__handle {
/*  letter-spacing: -3px;*/
}
.kb-block__handle,
.kb-block__add-btn {
  line-height: 1;
  color: var(--faint);
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  padding: var(--sp-2) 5px;
  border-radius: 4px;
  transition: background 0.1s, color 0.1s;
}
.kb-block__handle:hover,
.kb-block__add-btn:hover { background: var(--rail); color: var(--ink-2); }

.kb-block__type-picker {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: var(--sp-2);
  min-width: 140px;
  z-index: 100;
}

.kb-block__actions-menu {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: var(--sp-2);
  min-width: 140px;
  z-index: 100;
}
.kb-display-submenu { position: relative; }
.kb-submenu-arrow { margin-left: auto; color: var(--faint); }

.kb-block__submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: var(--sp-2);
  min-width: 150px;
  z-index: 101;
}

.kb-check-icon {
  display: inline-block;
  width: 18px;
  flex-shrink: 0;
}

.kb-block__action-option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 7px var(--sp-5);
  border-radius: 6px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-5);
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.1s;
}
.kb-block__action-option svg { flex-shrink: 0; opacity: .7; }
.kb-block__action-option:hover { background: var(--rail); }
.kb-block__action-option--danger { color: var(--red); }
.kb-block__action-option--danger:hover { background: var(--red-soft); }
.kb-block__type-picker-divider { height: 1px; background: var(--line); margin: var(--sp-2) var(--sp-4); }

.kb-heading { outline: none; word-break: break-word; margin: 0; font-weight: 700; color: var(--ink); cursor: text; }
.kb-heading:empty::before { color: var(--faint); font-weight: 400; }
.kb-heading--heading1 { font-size: 2rem; letter-spacing: -.5px; line-height: 1.2; }
.kb-heading--heading1:empty::before { content: "Heading 1"; }
.kb-heading--heading2 { font-size: 1.6rem; letter-spacing: -.3px; line-height: 1.25; }
.kb-heading--heading2:empty::before { content: "Heading 2"; }
.kb-heading--heading3 { font-size: 1.3rem; letter-spacing: -.2px; line-height: 1.3; }
.kb-heading--heading3:empty::before { content: "Heading 3"; }
.kb-heading--heading4 { font-size: 1.1rem; line-height: 1.35; }
.kb-heading--heading4:empty::before { content: "Heading 4"; }

.kb-hr { border: none; border-top: 2px solid var(--line); margin: var(--sp-4) 0; }

/* Todo list */
.kb-todo__list { display: flex; flex-direction: column; }
.kb-todo__item { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-1) 0; }
.kb-todo__check {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--sp-1); padding: 0; border: none; background: none; cursor: pointer;
  color: var(--muted); line-height: 0;
}
button.kb-todo__check:hover { color: var(--ink-2); }
.kb-todo__icon { display: inline-flex; line-height: 0; }
.kb-todo__icon--checked { display: none; }
.kb-todo__item--checked .kb-todo__icon--unchecked { display: none; }
.kb-todo__item--checked .kb-todo__icon--checked { display: inline-flex; }
.kb-todo__item--checked .kb-todo__check { color: var(--green); }
.kb-todo__text {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: none; outline: none;
  background: none; resize: none; overflow: hidden;
  font: inherit; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap;
}
.kb-todo__text::placeholder { color: var(--faint); }
.kb-todo__item--checked .kb-todo__text { color: var(--muted); text-decoration: line-through; }

.kb-block__frame { display: block; flex: 1; min-width: 0; }
.kb-block__content { min-width: 0; }

.kb-block__placeholder { color: var(--faint); font-style: italic; }
.kb-block__text-view { line-height: 1.6; }

/* Callout blocks (tip, warning, …). Shared box + leading icon; each type only
   sets --callout-bg / --callout-accent below, so new kinds need one rule each. */
.kb-callout {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: 9px;
  background: var(--callout-bg); border: 1px solid var(--callout-accent);
}
.kb-callout__icon { flex: none; margin-top: 1px; color: var(--callout-accent); }
.kb-callout__body { min-width: 0; flex: 1; }
.kb-block--tip     { --callout-bg: #fff8e1; --callout-accent: #e0a800; }
.kb-block--warning { --callout-bg: var(--red-soft); --callout-accent: var(--red); }
.kb-block--help    { --callout-bg: var(--blue-soft); --callout-accent: var(--blue); }
/* The triangle-alert and circle-help glyphs read high; nudge them down to sit
   on the first line. */
.kb-block--warning .kb-callout__icon,
.kb-block--help .kb-callout__icon { margin-top: 3px; }

/* Trix: disable file attachment */
.trix-button-group--file-tools { display: none !important; }

/* Block form */
.kb-block__form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) 0; }
.kb-block__trix { min-height: 15em; }
.kb-block__form-actions { display: flex; gap: var(--sp-4); }

/* Image gallery */
.kb-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
}
.kb-gallery--edit { margin-bottom: var(--sp-5); }

.kb-gallery__item { display: flex; flex-direction: column; }

.kb-gallery--half-width {
  gap: var(--sp-5);
  padding: var(--sp-2) 0;
}
.kb-gallery--half-width .kb-gallery__item { width: calc(50% - 6px); }
.kb-gallery--half-width .kb-gallery__thumb {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.kb-gallery--full-width {
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-2) 0;
}
.kb-gallery--full-width .kb-gallery__item { width: 100%; }
.kb-gallery--full-width .kb-gallery__thumb {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.kb-gallery__thumb-link { display: block; }
.kb-gallery__caption {
  color: var(--muted);
  padding: var(--sp-2) var(--sp-1) 0;
  line-height: 1.4;
  display: none;
}

.kb-gallery__caption-input {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  background: var(--paper);
}
.kb-gallery__caption-input:focus { border-color: var(--blue); }
.kb-gallery__thumb {
  display: block;
  height: 140px;
  width: auto;
  border-radius: 4px;
  transition: opacity 0.15s;
}

/* Gallery edit items */
.kb-gallery__edit-item { position: relative; display: inline-block; cursor: grab; }
.kb-gallery__edit-item:active { cursor: grabbing; }
.kb-gallery__edit-item--dragging { opacity: 0.4; }

.kb-gallery__drop-marker {
  display: inline-block;
  width: 3px;
  height: 100px;
  background: var(--blue);
  border-radius: 2px;
  vertical-align: top;
  pointer-events: none;
  align-self: stretch;
}
.kb-gallery__edit-item .kb-gallery__thumb { height: 100px; width: auto; }
.kb-gallery__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--paper);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-decoration: none;
}
.kb-gallery__remove:hover { background: rgba(192,57,43,0.9); }


/* Spinner */
@keyframes kb-spin { to { transform: rotate(360deg); } }
.kb-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--line-2);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: kb-spin 0.55s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.kb-upload-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--sp-4) 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--ink-2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 9999;
}

/* Dropzone */
.kb-dropzone {
  border: 2px dashed var(--line-2);
  border-radius: 8px;
  padding: var(--sp-7);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: var(--sp-4);
}
.kb-dropzone:hover, .kb-dropzone--over {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.kb-dropzone__label { color: var(--muted); pointer-events: none; }
.kb-dropzone__input { display: none; }
.kb-dropzone__preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  justify-content: center;
}
.kb-dropzone__preview-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
.kb-dropzone__preview-file {
  padding: var(--sp-2) 10px;
  background: var(--rail);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-2);
  font-size: 0.85rem;
}


/* File grid — fixed 5 boxes per row */
.kb-file-grid {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
}
.kb-file-grid--edit { margin-bottom: var(--sp-5); }

.kb-file { position: relative; }

.kb-file__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  height: 100%;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
}
a.kb-file__box:hover { background: var(--rail); border-color: var(--line-2); }

.kb-file__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.kb-file--zip .kb-file__icon { color: #b58a16; }
.kb-file--doc .kb-file__icon { color: #2b6cb0; }
.kb-file--xls .kb-file__icon { color: #2f855a; }
.kb-file--pdf .kb-file__icon { color: var(--red); }
.kb-file--exe .kb-file__icon { color: #6b46c1; }
.kb-file--video .kb-file__icon { color: #b83280; }
.kb-file--sound .kb-file__icon { color: #b7791f; }

.kb-file__name {
  width: 100%;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.3;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kb-file__meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.kb-file__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: var(--paper);
  text-decoration: none;
  line-height: 1;
}
.kb-file__remove:hover { background: rgba(192,57,43,0.9); }


/* Page form */
.kb-page-form { max-width: 560px; margin: 0 auto; }
.kb-page-form__context { color: var(--muted); margin-bottom: var(--sp-2); }
.kb-page-form__context a { text-decoration: none; }
.kb-page-form__context a:hover { text-decoration: underline; }
.kb-page-form__title { font-family: var(--display); font-size: var(--fs-9); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-bottom: var(--sp-7); }
/* Title row with a right-aligned action (e.g. the site edit form's delete). */
.kb-page-form__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.kb-page-form__head .kb-page-form__title { margin-bottom: 0; }
.kb-page-form__head form { margin: 0; }
.kb-page-title-input {
  width: 100%;
  font-size: 1.8rem;
  font-weight: 700;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  letter-spacing: -.3px;
}

/* November page-editor: doc width + typography overrides */
.pg-actions { position: relative; }
.cl-scroll .kb-page { max-width: 760px; margin: 0; padding: 10px 0 0; }

/* Page content + table-of-contents column */
.kb-page-layout { display: flex; align-items: flex-start; gap: 48px; }
.kb-page-layout .kb-page { flex: 1 1 auto; min-width: 0; }

/* Right rail holding the table of contents (the "edited by" meta lives in the
   page header). */
.kb-page-layout .kb-rail {
  flex: 0 0 190px;
  width: 190px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: var(--sp-5) 0;
}

/* Nothing to show (no editor meta and the TOC hidden) → don't reserve the column. */
.kb-page-layout .kb-rail:not(:has(> *:not([hidden]))) { display: none; }

/* Inside the rail the sizing and stick are the rail's job; the TOC just flows. */
.kb-rail .kb-toc { position: static; flex: initial; width: auto; max-height: none; overflow: visible; padding: 0; }

/* The "edited by" meta sits in the page header's right slot, inline with the
   action buttons. */
.kb-editmeta { display: flex; align-items: center; gap: var(--sp-3); }
.kb-editmeta > :first-child { flex: none; }
.kb-editmeta__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.kb-editmeta__who { font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); }
.kb-editmeta__when { font-size: var(--fs-2); color: var(--faint); }

.kb-toc {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 190px;
  width: 190px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: var(--sp-5) 0;
}
.kb-toc__label {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.kb-toc__list { display: flex; flex-direction: column; }
.kb-toc__link {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: var(--fs-4);
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .1s, border-color .1s;
}
.kb-toc__link:hover { color: var(--ink); }
.kb-toc__link--active {
  color: var(--ink);
  border-left-color: var(--accent);
  font-weight: 600;
}
.kb-toc__link--h2 { padding-left: var(--sp-7); }
.kb-toc__link--h3 { padding-left: 36px; font-size: var(--fs-3); }
.kb-toc__link--h4 { padding-left: 48px; font-size: var(--fs-3); }

/* Not enough room for a side column — hide the TOC */
@media (max-width: 1100px) {
  .kb-toc { display: none; }
}

/* Mobile: no room for a side column, so the layout collapses to one column.
   The rail unwraps (display: contents) so the TOC ("On this page") can ride
   above the content. */
@media (max-width: 760px) {
  .kb-page-layout { flex-direction: column; gap: var(--sp-6); }
  .kb-page-layout .kb-rail { display: contents; }

  .kb-toc:not([hidden]) { display: block; order: -1; margin-top: var(--sp-6); max-height: none; overflow: visible; }

  /* The header gets tight on mobile, so drop the edit meta's text and keep just
     the avatar (its title tooltip still names the editor). */
  .kb-editmeta__text { display: none; }

  /* Never scroll the page sideways on mobile: the hover-only side gutter sits in
     a negative margin that spills past the narrow viewport (and its drag/menu
     handles can't be hovered on touch anyway), and long code lines must scroll
     inside their own block rather than widening the page. */
  .kb-block__side-actions { display: none; }
  .kb-block__text-view pre { max-width: 100%; overflow-x: auto; }
}
.kb-page__title, .kb-page__title--static { font-family: var(--display); }
.kb-heading { font-family: var(--display); color: var(--ink); }
.kb-heading--heading1 { font-size: var(--fs-9); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.kb-heading--heading2 { font-size: var(--fs-8); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; }
.kb-heading--heading3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.kb-heading--heading4 { font-family: var(--sans); font-size: var(--fs-4); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kb-block__text-view { font-family: var(--read); font-size: var(--fs-6); line-height: 1.72; color: var(--ink-2); }
.kb-block__text-view a { color: var(--blue); }
.kb-block__text-view b, .kb-block__text-view strong { color: var(--ink); }

/* Single block handle: grip sits in the gutter between sidebar and page
   content (to the left of the block), drag to reorder / click for menu. */
.kb-block__side-actions { width: 2rem; margin-left: -2rem; justify-content: flex-end; padding-right: var(--sp-3); }
.kb-block__handle {
  width: 23px; height: 23px; border-radius: 6px; padding: 0;
  display: grid; place-items: center; cursor: grab; color: var(--faint);
  background: none; border: 0; transition: color .12s, background .12s; letter-spacing: 0;
}
.kb-block__handle:hover { background: var(--rail); color: var(--accent); }
.kb-block__handle:active { cursor: grabbing; }
.kb-block__menu-group {
  padding: var(--sp-3) var(--sp-5) var(--sp-2); font-size: var(--fs-2); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}