/* ═══════════════════════════════════════════════════════════════════
   INFO BLOCKS — UI for the reusable info library
   - Banner shown atop the step-info editor when the step is linked
     to a library block
   - Reuse button shown when not linked (opens the picker)
   - Toggle to save the current info to the library
   - Picker: searchable list of available blocks
   - Reader-side "from library" pill
   ═══════════════════════════════════════════════════════════════════ */

/* Linked banner — info-tinted, with a quiet "Unlink" pill on the right */
.kb-info-link-banner {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md);
}
.kb-info-link-banner-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border-radius: var(--radius-md);
}
.kb-info-link-banner-icon svg { width: 16px; height: 16px; }
.kb-info-link-banner-title {
  font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary);
}
.kb-info-link-banner-sub {
  font-size: var(--text-xs); color: var(--text-secondary);
  margin-top: 2px;
}
.kb-info-link-unlink {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kb-info-link-unlink:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* Library controls — grouped at the BOTTOM, side by side: "Reuse from library"
   (left) + "Save to library" toggle (right). Compact, so they don't eat the
   vertical space the old top-CTA + bottom-card layout did. */
.kb-info-library-heading {
  margin-top: 4px;
  margin-bottom: 8px;
}
.kb-info-library-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 380px) {
  .kb-info-library-row { grid-template-columns: 1fr; }
}

/* Save-to-library (left, toggle) + Reuse-from-library (right, action) — two
   matching tiles in the same card language as the KB/Asset link tiles above. */
.kb-info-lib-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s;
}
.kb-info-lib-tile:hover { border-color: var(--border-strong); }
.kb-info-lib-tile:active { transform: scale(0.99); }
.kb-info-lib-tile-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.kb-info-lib-tile-icon svg { width: 18px; height: 18px; }
.kb-info-lib-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-info-lib-tile-title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
}
.kb-info-lib-tile-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.2;
}
/* Armed state — Save tile is on. Accent the tile so it's obvious this info will
   also be saved to the library on Save. */
.kb-info-lib-tile.is-on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.kb-info-lib-tile.is-on .kb-info-lib-tile-icon {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.kb-info-lib-tile.is-on .kb-info-lib-tile-sub { color: var(--accent); }
.kb-modal-field-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Reuse picker — search + scrollable list */
.kb-info-picker-search {
  position: relative;
  margin-bottom: 12px;
}
.kb-info-picker-search svg {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-muted);
}
.kb-info-picker-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--text-primary);
  font-family: var(--body);
}
.kb-info-picker-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.kb-info-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.kb-info-picker-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.12s, background 0.12s;
}
.kb-info-picker-row:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
}
.kb-info-picker-row.is-current {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.kb-info-picker-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--text-muted);
}
.kb-info-picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kb-info-picker-thumb svg { width: 22px; height: 22px; }
.kb-info-picker-thumb-loader {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.kb-info-picker-body { min-width: 0; }
.kb-info-picker-title {
  font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-info-picker-preview {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-info-picker-current-badge {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.kb-info-picker-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}
.kb-info-picker-empty-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}
.kb-info-picker-empty-icon svg { width: 22px; height: 22px; }
.kb-info-picker-empty-title {
  font-size: var(--text-md); font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.kb-info-picker-empty-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Reader-side "from library" pill above the comment text */
.kb-instr-info-popup-linked-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}
.kb-instr-info-popup-linked-pill svg { width: 12px; height: 12px; }

/* "Open linked document" button — appears at the bottom of an info popup
   when the step/block links to another instruction. Tapping it closes
   the popup and opens the linked instruction as a nested reader. */
.kb-instr-info-popup-doclink {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
  touch-action: manipulation;
}
.kb-instr-info-popup-doclink:hover {
  border-color: var(--accent);
  background: var(--bg-surface);
}
.kb-instr-info-popup-doclink:active { transform: scale(0.995); }
.kb-instr-info-popup-doclink > svg {
  width: 22px; height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.kb-instr-info-popup-doclink-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kb-instr-info-popup-doclink-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kb-instr-info-popup-doclink-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-instr-info-popup-doclink-arrow {
  width: 16px; height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* "Link to a document" empty-state button shown in the step info editor
   when no document is currently linked. */
.kb-info-linked-doc-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  touch-action: manipulation;
}
.kb-info-linked-doc-empty:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.kb-info-linked-doc-empty svg { width: 16px; height: 16px; }

/* Chip shown when a document IS linked — file icon + title + unlink X. */
.kb-info-linked-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 12px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  max-width: 100%;
}
.kb-info-linked-doc-chip > svg:first-child {
  width: 16px; height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.kb-info-linked-doc-chip-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kb-info-linked-doc-chip-unlink {
  width: 22px; height: 22px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.kb-info-linked-doc-chip-unlink:hover {
  background: rgba(220, 38, 38, 0.12);
  color: rgb(220, 38, 38);
}
.kb-info-linked-doc-chip-unlink svg { width: 12px; height: 12px; }

/* ─── Link block — both edit & view modes ──────────────────────────
   A standalone block (separate from info-attached links) that links
   to another instruction. In edit mode shows a card with Change /
   Remove. In view mode renders as a clickable card that opens the
   linked instruction in a nested reader. */

/* Edit-mode card (inside .kb-doc-block-link / .kb-doc-link-card) */
.kb-doc-block-link {
  margin: 8px 0;
}
.kb-doc-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.kb-doc-link-card-icon {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.kb-doc-link-card-icon svg { width: 18px; height: 18px; }
.kb-doc-link-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kb-doc-link-card-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kb-doc-link-card-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-doc-link-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Viewer card — clickable, opens the linked doc */
.kb-doc-block-render-link { margin: 10px 0; }
.kb-doc-link-render-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
  touch-action: manipulation;
}
.kb-doc-link-render-card:hover {
  border-color: var(--accent);
  background: var(--bg-surface);
}
.kb-doc-link-render-card:active { transform: scale(0.996); }
.kb-doc-link-render-icon {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.kb-doc-link-render-icon svg { width: 18px; height: 18px; }
.kb-doc-link-render-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kb-doc-link-render-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kb-doc-link-render-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-doc-link-render-arrow {
  width: 18px; height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Section crumb — "› Section name" shown inside link card titles and info chips */
.kb-doc-link-section-crumb {
  color: var(--accent);
  font-weight: 500;
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   INFO LIBRARY — manager view (browse / edit / hide / delete blocks)
   ═══════════════════════════════════════════════════════════════════ */

.kb-info-lib-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb-info-lib-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: opacity 0.15s, border-color 0.15s;
}
.kb-info-lib-row.is-hidden {
  opacity: 0.6;
  background: var(--bg-elevated);
}
.kb-info-lib-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--text-muted);
}
.kb-info-lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kb-info-lib-thumb svg { width: 22px; height: 22px; }
.kb-info-lib-thumb-loader { font-size: var(--text-xs); color: var(--text-muted); }
.kb-info-lib-body { min-width: 0; }
.kb-info-lib-title {
  font-size: var(--text-md); font-weight: 600;
  color: var(--text-primary);
  word-wrap: break-word;
}
.kb-info-lib-preview {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}
.kb-info-lib-hidden-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}

/* Sidebar Library row icon — same accent treatment as Captures */
.kb-tree-row.kb-tree-row-library.is-selected {
  background: var(--accent-soft);
  color: var(--text-primary);
}
.kb-tree-row.kb-tree-row-library.is-selected .kb-tree-icon-library {
  color: var(--accent);
}
.kb-tree-icon-library { color: var(--text-secondary); }
.kb-tree-icon-library svg { width: 16px; height: 16px; }

/* Library system card icon (mobile unified list) */
.kb-system-icon-library {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   MODULE TOOLBAR — sticky top toolbar shared across modules
   Layout: [hamburger] [search input — wide] [sliders icon]
   Reusable across Tasks / Inventory / Audits etc. Same shape everywhere
   so users learn one location.
   ═══════════════════════════════════════════════════════════════════ */
.module-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  margin: -8px -4px 12px;
  /* Transparent — let page content show through. The burger, search,
     and sliders each have their own card backgrounds so they stay
     readable. A light backdrop blur softens any text that scrolls
     behind the gaps between them. */
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
/* When the toolbar is "stuck" (scrolled past origin) get a hairline so
   it visibly separates from the content below it. */
.module-toolbar.is-stuck { border-bottom-color: var(--border); }

.module-toolbar-burger,
.module-toolbar-sliders {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.module-toolbar-burger:hover,
.module-toolbar-sliders:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}
.module-toolbar-burger:active,
.module-toolbar-sliders:active { transform: scale(0.96); }
.module-toolbar-burger svg,
.module-toolbar-sliders svg {
  width: 20px; height: 20px;
}

.module-toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
}
.module-toolbar-search-icon {
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.module-toolbar-search-input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-family: var(--body);
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
}
.module-toolbar-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-surface);
}
.module-toolbar-search-input::placeholder { color: var(--text-muted); }
.module-toolbar-search-clear {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}
.module-toolbar-search-clear:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.module-toolbar-search-clear svg { width: 14px; height: 14px; }

/* Settings dropdown menu — anchored to the sliders icon */
.module-toolbar-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.module-toolbar-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.module-toolbar-menu-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.1s;
}
.module-toolbar-menu-item:hover { background: var(--bg-elevated); }
.module-toolbar-menu-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-md);
}
.module-toolbar-menu-icon svg { width: 18px; height: 18px; }
.module-toolbar-menu-title {
  font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary);
}
.module-toolbar-menu-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTICE INFO ATTACHMENT — reader-side (i) button on warning/important
   /tip/info notice blocks. Editor-side reuses the existing
   .kb-instr-edit-step-info-row + pill styles for visual consistency
   with steps.
   ═══════════════════════════════════════════════════════════════════ */

/* Reader: small (i) button at the end of the notice header row */
.kb-doc-callout-render .kb-doc-callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kb-doc-callout-info-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  /* No outer border or background circle — the (i) SVG has its own
     circle stroke. Without this, both compose into a visible
     double-circle. Matches the table + photo info button pattern. */
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.12s, transform 0.06s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Accent colour — info icons signal interactivity, accent says
     "tap me, I do something". Matches step/table info icons and
     the section borders so the colour family is consistent. Per
     Radek's spec: "info icons should match the accent colour, same
     style as borders". */
  color: var(--accent);
}
.kb-doc-callout-info-btn:hover { opacity: 1; color: var(--accent); }
.kb-doc-callout-info-btn:active { opacity: 0.7; transform: scale(0.94); }
.kb-doc-callout-info-btn svg { width: 22px; height: 22px; }

/* Reader meta-row: visibility pill wraps in a meta-item-style chip but
   keeps the pill's own colour treatment (dept colour or Everyone). The
   wrap removes the meta-item border so the visibility pill provides
   its own visual frame. */
.kb-reader-meta-visibility-wrap {
  padding: 0;
  background: transparent;
  border: none;
}

/* iOS Safari: when a CSS-transformed element (zoomed canvas-wrap) is
   touched, native pan/scroll behaviour can fire even with touch-action:
   none, unless the ancestor chain ALSO has it. Cascade it through every
   level of the editor so the browser never tries to do its own gesture
   handling on top of our pointer-event handlers. */
.kb-annot-overlay,
.kb-annot-stage,
.kb-annot-canvas-wrap {
  touch-action: none;
  overscroll-behavior: none;
}

/* Loader cancel button — only appears after the API has been pending
   for 10s. Quiet styling so it doesn't draw attention until needed. */
.kb-instr-loader-cancel {
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.kb-instr-loader-cancel:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ═══════════════════════════════════════════════════════════════════
   PHOTO EDITOR — MODE BANNER
   Sits between the topbar and the canvas, telling the user
   unambiguously what mode they're in. Cyan tint = navigate (pan/zoom),
   green tint = drawing (image locked). The text describes what a
   single-finger drag will do at this moment.
   ═══════════════════════════════════════════════════════════════════ */
/* The mode-hint banner row was removed to give the canvas more room. Its
   contextual Edit/Delete buttons now live in the top bar (.kb-annot-topbar-
   actions); only their button styling (.kb-annot-mode-edit / -del) remains. */
/* Contextual "Edit text" button inside the mode banner — appears only when a
   text/measure label is selected. A real, accessible, large tap target that
   replaces the previously hidden double-tap as the way to fix a typo. */
.kb-annot-mode-edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s;
}
.kb-annot-mode-edit:hover { background: rgba(255, 255, 255, 0.28); }
.kb-annot-mode-edit:active { transform: scale(0.97); }
.kb-annot-mode-edit svg { width: 14px; height: 14px; }
.kb-annot-mode-edit[hidden] { display: none; }
/* Destructive variant — delete the selected annotation. Red tint so it reads
   apart from the neutral "Edit" button it sits beside. */
.kb-annot-mode-del { border-color: rgba(232, 69, 69, 0.55); background: rgba(232, 69, 69, 0.24); }
.kb-annot-mode-del:hover { background: rgba(232, 69, 69, 0.38); }

@media (max-width: 380px) {
  .kb-annot-mode-edit { padding: 5px 9px; }
}

/* ═════════════════════════════════════════════════════════════════════
   DOCUMENT SECTIONS (editor + reader)
   Documents now group blocks into named sections — same UX pattern as
   checklists/procedures, but applied to docs of any block type.
   ═════════════════════════════════════════════════════════════════════ */

/* Editor: each section is a card containing its title input, action
   buttons (move up/down, remove) and the blocks underneath. */
.kb-doc-edit-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 14px;
}
.kb-doc-edit-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kb-doc-edit-section-actions {
  display: flex;
  /* Vertical stack — same orientation as block action columns,
     so up/down arrows are consistently stacked everywhere in the
     editor. Radek's feedback was that some places had them
     horizontally and others vertically, which confused new users. */
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
/* Collapse chevron — left of the title input. Tap to toggle.
   Same look as the reader's section chevron. Rotates 90° when collapsed. */
.kb-doc-edit-section-collapse {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s;
}
.kb-doc-edit-section-collapse:hover { color: var(--text-primary); }
.kb-doc-edit-section-collapse svg {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}
.kb-doc-edit-section-collapse[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}
/* Hide the section body when collapsed in the editor */
.kb-doc-edit-section:has(.kb-doc-edit-section-collapse[aria-expanded="false"]) .kb-doc-edit-section-blocks {
  display: none;
}
.kb-doc-edit-section-title {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: 600;
  /* The section card is --bg-elevated, and .kb-modal-input's default fill is
     ALSO --bg-elevated — so the title field was invisible against its own card.
     Drop it to --bg-surface + a firmer edge (the Prompt-27/33 card-vs-canvas
     language) so it clearly reads as "type the section name here". Both themes
     ride the tokens. Overrides .kb-modal-input (css/03) — same specificity,
     later source. */
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--text-primary);
}
.kb-doc-edit-section-title:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kb-doc-edit-section-title::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}
.kb-doc-edit-section-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Add section button — an accent "add" CTA (dashed, so it still reads as an
   "add more" affordance rather than a primary submit) sitting at the bottom of
   the section list. Was a muted transparent dashed button that barely
   registered; now accent-tinted at rest and fills solid on hover so it's an
   obvious, inviting control (Radek: "make these buttons more visible"). */
.kb-doc-edit-add-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--text-md);
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.kb-doc-edit-add-section:hover,
.kb-doc-edit-add-section:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.kb-doc-edit-add-section:hover svg,
.kb-doc-edit-add-section:active svg { color: #fff; }
.kb-doc-edit-add-section svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Reader: section header is a tap target that toggles collapse via
   aria-expanded. Chevron rotates on collapse. Body slides shut. */
.kb-doc-content-sectioned {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kb-doc-section-render {
  /* Documents have sections (collapsible groups). To make them feel
     distinct from body content — Radek's feedback was that the
     previous "white card on white background" was too subtle to
     register as a foldable container — we add a coloured left bar
     (echoing the notice-card pattern) and a slightly tinted header.
     The result still reads as elegant but tells the eye "this is a
     section you can fold." */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.kb-doc-section-render-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(to bottom, var(--bg-surface), var(--bg-elevated));
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.kb-doc-section-render-header:hover {
  background: var(--bg-surface);
}
.kb-doc-section-render-header[aria-expanded="false"] {
  /* When collapsed there's no body below, so the bottom border line
     would float orphaned. Remove it to keep the header clean. */
  border-bottom: 0;
}
/* Section title shown in the reader so users can see what they're
   about to read / fold. Authors set the name in edit mode; it carries
   straight through to the published doc. */
.kb-doc-section-render-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.kb-doc-section-render-title-text {
  display: block;
  /* Match the document title's typeface exactly (.kb-reader-title — the clean
     system-UI "Apple Notes" stack), so section headers feel like the same
     family as the doc title, just smaller. Size (18px) is the only thing that
     differs from the 22px doc title, so the hierarchy reads as one consistent
     style: doc title 22px > section 18px > body 14px. */
  font-family: -apple-system, BlinkMacSystemFont, var(--body), "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-doc-section-render-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.kb-doc-section-render-header[aria-expanded="false"] .kb-doc-section-render-chevron {
  transform: rotate(-90deg);
}
.kb-doc-section-render-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kb-doc-section-render-header[aria-expanded="false"] + .kb-doc-section-render-body {
  display: none;
}

/* ═════════════════════════════════════════════════════════════════════
   ACTIVE BLOCK / SECTION INDICATORS (editor)
   When the user taps a block — even on a non-editable surface like a
   photo or a table card — the block + its enclosing section get a
   subtle highlight so users always know which card they're working on.
   ═════════════════════════════════════════════════════════════════════ */

/* Generic active-block ring — subtle accent halo, doesn't shift layout */
/* Active block highlight — gentle accent glow, NOT a heavy ring.
   Matches the section title input's focus treatment so the active
   marker reads delicately rather than as a thick border. Per Radek's
   spec: "I like the gentle mark — more delicate and professional".
   The look is the standard "input focus" pattern: thin accent border
   + soft translucent halo around it. */
.kb-doc-block.is-active-block,
.kb-doc-block-callout-wrap.is-active-block {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
  border-radius: var(--radius-md);
  transition: box-shadow 0.16s ease;
}
/* Section that contains the active block — same gentle halo treatment.
   The previous look (3px solid left strip) was too heavy; this matches
   the active-block style so the visual language stays consistent. */
.kb-doc-edit-section.is-active-section {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
  border-radius: var(--radius-md);
  transition: box-shadow 0.16s ease;
}

/* Info library sort chips — small chip row above the list */
.kb-info-lib-sort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 4px 14px;
}
.kb-info-lib-sort-chip {
  padding: 6px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.kb-info-lib-sort-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.kb-info-lib-sort-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Usage badge on info library row — accent for "used", muted for unused */
.kb-info-lib-usage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
}
.kb-info-lib-usage.is-unused {
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.kb-info-lib-usage svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   ATTACHMENTS — uploaded files (PDF, Word, Excel)
   ═════════════════════════════════════════════════════════════════════ */

.kb-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* File-type-specific icon tints */
.kb-attachment-icon-pdf { color: #e44e4e; }
.kb-attachment-icon-word { color: #2b6cdf; }
.kb-attachment-icon-excel { color: #2ba56b; }
.kb-attachment-icon-file { color: var(--text-secondary); }

/* Type+size pill on the card meta row */
.kb-attachment-typepill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.kb-attachment-typepill-pdf { background: rgba(228,78,78,0.12); color: #e44e4e; border-color: rgba(228,78,78,0.3); }
.kb-attachment-typepill-word { background: rgba(43,108,223,0.12); color: #2b6cdf; border-color: rgba(43,108,223,0.3); }
.kb-attachment-typepill-excel { background: rgba(43,165,107,0.12); color: #2ba56b; border-color: rgba(43,165,107,0.3); }

/* ═════════════════════════════════════════════════════════════════════
   ATTACHMENT VIEWER MODAL
   ═════════════════════════════════════════════════════════════════════ */

.kb-attachment-viewer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.24s ease;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
}
.kb-attachment-viewer-overlay.open { opacity: 1; pointer-events: auto; }

.kb-attachment-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
@media (min-width: 768px) {
  .kb-attachment-viewer {
    margin: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  }
}

.kb-attachment-viewer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.kb-attachment-viewer-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.kb-attachment-viewer-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.kb-attachment-viewer-icon svg {
  width: 22px; height: 22px;
}
.kb-attachment-viewer-text {
  flex: 1;
  min-width: 0;
}
.kb-attachment-viewer-title {
  font-family: var(--display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-attachment-viewer-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-attachment-viewer-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.kb-attachment-viewer-actions a.kb-reader-action {
  text-decoration: none;
}

.kb-attachment-viewer-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #525659; /* PDF viewer chrome look */
}
.kb-attachment-pdf-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* "No preview" panel for Word / Excel */
.kb-attachment-no-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-base);
  text-align: center;
  gap: 14px;
}
.kb-attachment-no-preview-icon {
  width: 80px; height: 80px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  display: grid; place-items: center;
}
.kb-attachment-no-preview-icon svg {
  width: 44px; height: 44px;
}
.kb-attachment-no-preview-title {
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
}
.kb-attachment-no-preview-text {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.5;
}
.kb-attachment-no-preview-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--accent-on);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  margin-top: 6px;
  transition: opacity 0.12s;
}
.kb-attachment-no-preview-cta:hover { opacity: 0.92; }
.kb-attachment-no-preview-cta svg { width: 16px; height: 16px; }

/* ═════════════════════════════════════════════════════════════════════
   ACTION SHEET — "+" button content picker
   ═════════════════════════════════════════════════════════════════════ */

.kb-action-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 180;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.kb-action-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.kb-action-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-base);
  border-radius: 16px 16px 0 0;
  padding: 18px 14px max(18px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.32,0.72,0,1);
  /* A long sheet (e.g. the KB block palette's 14 items) must scroll smoothly
     inside itself rather than run off-screen and hide the Cancel button.
     Short sheets never reach the cap, so this is a no-op for them. */
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.kb-action-sheet-overlay.open .kb-action-sheet { transform: translateY(0); }
@media (min-width: 768px) {
  .kb-action-sheet-overlay { align-items: center; }
  .kb-action-sheet {
    border-radius: var(--radius-lg);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .kb-action-sheet-overlay.open .kb-action-sheet { transform: translateY(0) scale(1); opacity: 1; }
}

.kb-action-sheet-title {
  font-family: var(--display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 8px 12px;
}
.kb-action-sheet-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.kb-action-sheet-item:hover,
.kb-action-sheet-item:active { background: var(--bg-elevated); }
.kb-action-sheet-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.kb-action-sheet-icon svg { width: 22px; height: 22px; }
.kb-action-sheet-text { flex: 1; min-width: 0; }
.kb-action-sheet-name {
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.kb-action-sheet-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.kb-action-sheet-cancel {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--body);
  font-size: var(--text-lg);
  font-weight: 500;
  cursor: pointer;
}

/* Optional grouped sections (openActionSheet `sections` opt). Slim header +
   a plain wrapper — variants (e.g. the KB block palette's 2-col card grid,
   css/03) restyle the wrapper; ungrouped callers never emit these nodes. */
.kb-action-sheet-sec-title {
  font: 600 11px / 1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 8px 6px;
}
.kb-action-sheet-sec { display: flex; flex-direction: column; }

/* Destructive item (e.g. Archive document) — red icon + label so the
   irreversible-ish action reads as a clear "danger" cue in the sheet. */
.kb-action-sheet-item.is-danger .kb-action-sheet-icon {
  background: var(--danger-soft);
  color: var(--danger);
}
.kb-action-sheet-item.is-danger .kb-action-sheet-name { color: var(--danger); }
.kb-action-sheet-item.is-danger:hover,
.kb-action-sheet-item.is-danger:active { background: var(--danger-soft); }

/* ═════════════════════════════════════════════════════════════════════
   UPLOAD PROGRESS MODAL
   ═════════════════════════════════════════════════════════════════════ */

.kb-attachment-progress-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.kb-attachment-progress-overlay.open { opacity: 1; pointer-events: auto; }
.kb-attachment-progress {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 90%;
  max-width: 360px;
  text-align: center;
}
.kb-attachment-progress-title {
  font-size: var(--text-md);
  color: var(--text-primary);
  margin-bottom: 14px;
  word-break: break-word;
}
.kb-attachment-progress-bar {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kb-attachment-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 0.2s ease;
}
.kb-attachment-progress-text {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ─── CROSS-DEPT PASSTHROUGH BADGE ─────────────────────────────────
   Subtle "From Maintenance" hint shown on cards visible only via
   passthrough (not directly visible to current dept). Sits under the
   title so it doesn't compete with the visibility pill. */
.kb-cross-dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 2px 8px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  width: fit-content;
}
.kb-cross-dept-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ─── SEARCH MODE — minimise chrome above results ──────────────────
   When the toolbar search has text, hide everything between the
   toolbar and the results body so the results are right where the
   eye lands. Quick entry, page header, and action strip all pulled
   from layout — gives a clean, focused search experience. */
.is-searching .page-header,
.is-searching .quick-entry,
.is-searching .kb-actions-strip {
  display: none;
}

/* Mobile width pass (2026-06-25): tighten horizontal padding on mobile so content
   uses the screen width. Appended at end-of-file so it beats the base rules AND any
   wider-breakpoint (600/640/767px) blocks at equal specificity (later source wins).
   Desktop (>=600px) untouched. */
@media (max-width: 599px) {
  .kb-info-picker-empty { padding: 24px 12px; }
  .kb-action-sheet { padding: 16px 12px max(16px, env(safe-area-inset-bottom)); }
  .kb-attachment-progress { padding: 16px; }
  .kb-doc-section-render-header { padding: 10px 12px; }
  .kb-doc-section-render-body { padding: 12px 12px 14px; }
  .kb-info-lib-row { padding: 10px; }
  .kb-info-picker-row { padding: 8px; }
}