/* ═══════════════════════════════════════════════════════════════════════
   KB — Department visibility pill
   Small badge on KB cards & folder cards that shows who can see the item.
   Placed alongside other meta (date, site badge). Coloured by dept.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-visibility-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  /* Calm neutral chip (the two-tier card rule) — the identifying colour lives
     ONLY on the icon (--vp-color, applied below), never the whole pill. A loud
     coloured pill on every folder was the "badge popping up everywhere" noise. */
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.kb-visibility-pill.is-everyone {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
}
.kb-visibility-pill-icon {
  display: inline-grid;
  place-items: center;
  color: var(--vp-color, currentColor);
}
.kb-visibility-pill-icon svg,
.kb-visibility-pill > svg {
  width: 11px;
  height: 11px;
  /* The only splash of identifying colour — dept colour / accent for "N sites"
     / grey for the lock; "Everyone" has no --vp-color so it inherits the calm
     text colour. */
  color: var(--vp-color, currentColor);
}
.kb-visibility-pill-extra {
  margin-left: 2px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Visibility editor modal
   ═══════════════════════════════════════════════════════════════════════ */
.kb-vis-help {
  margin: 0 0 14px;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}
.kb-vis-everyone {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.kb-vis-everyone:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.kb-vis-everyone input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px; height: 18px;
  cursor: pointer;
}
.kb-vis-everyone-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kb-vis-everyone-text strong {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}
.kb-vis-everyone-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.kb-vis-divider {
  margin: 16px 4px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kb-vis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.kb-vis-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.kb-vis-row:has(input:checked) {
  border-color: var(--vp-color, var(--accent));
  background: color-mix(in srgb, var(--vp-color, var(--accent)) 10%, transparent);
}
.kb-vis-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px; height: 16px;
  cursor: pointer;
  margin: 0;
}
.kb-vis-row-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.kb-vis-row-icon svg { width: 14px; height: 14px; }
.kb-vis-row-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.kb-vis-warning {
  margin-top: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #dc2626;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.kb-vis-empty {
  margin: 0;
  padding: 16px;
  font-size: var(--text-base);
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  line-height: 1.5;
}
/* Cross-site visibility — one block per site (folders + documents) */
.kb-vis-site {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.kb-vis-site:first-of-type {
  border-top: 0;
  padding-top: 2px;
}
.kb-vis-site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.kb-vis-site-head > span:first-child {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}
.kb-vis-site-sum {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* The visibility pill, when used inside the note reader's meta row, becomes
   a tappable button with hover affordance */
button.kb-reader-meta-visibility {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px dashed transparent;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: var(--radius-md);
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
}
button.kb-reader-meta-visibility:hover {
  border-color: var(--border);
  background: var(--bg-elevated);
}

/* ═══════════════════════════════════════════════════════════════════════
   Generic modal — used for the dept-deletion handoff and any future
   admin-flow dialogs that don't live inside a module's own modal system.
   ═══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.65); }
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  transform: translateY(8px);
  transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
}
.modal-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}
.modal-btn {
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 600;
  font-family: var(--body);
  cursor: pointer;
  border: 1px solid var(--border);
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
}
.modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.modal-btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.modal-btn-secondary:hover:not(:disabled) { color: var(--text-primary); }
.modal-btn-primary {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}
.modal-btn-primary:hover:not(:disabled) { opacity: 0.88; }
.modal-btn-danger {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}
.modal-btn-danger:hover:not(:disabled) { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════════════════
   Dept deletion handoff — specifics
   ═══════════════════════════════════════════════════════════════════════ */
.dept-handoff-intro {
  margin: 0 0 8px;
  font-size: var(--text-md);
  color: var(--text-primary);
  line-height: 1.5;
}
.dept-handoff-breakdown {
  margin: 0 0 18px;
  padding-left: 22px;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
}
.dept-handoff-breakdown li strong {
  color: var(--text-primary);
  font-weight: 700;
}
.dept-handoff-question {
  margin: 0 0 12px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}
.dept-handoff-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dept-handoff-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dept-handoff-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dept-handoff-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px; height: 16px;
  cursor: pointer;
}
.dept-handoff-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dept-handoff-option-text strong {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}
.dept-handoff-option-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Mobile toolbar (replaces 5-icon row inside folder view)
   On mobile, the folder view shows just two buttons:
     +  primary (turquoise) — opens action sheet (Note / Doc / Subfolder)
     ⋯  secondary           — opens action sheet (Edit / Move / Delete)
   On desktop the existing 5-icon row stays.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-folder-titlebar-actions.is-mobile {
  gap: 8px;
}
.kb-mobile-action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  -webkit-tap-highlight-color: transparent;
}
.kb-mobile-action:active { transform: scale(0.96); }
.kb-mobile-action svg { width: 18px; height: 18px; }
.kb-mobile-action-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);
}
.kb-mobile-action-primary:hover { opacity: 0.9; }

/* Hide the Archive tab on mobile — nobody hunts archives on a phone.
   It still works on desktop. */
@media (max-width: 1023px) {
  .kb-tab[data-mode="archive"] { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Action sheet (bottom-style modal for + and ⋯ menus)
   Renders a full-width list of actions, each with an icon, label, and
   optional sub-label. Slides up from bottom on open.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-actionsheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.kb-actionsheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.kb-actionsheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface);
  border-radius: 16px 16px 0 0;
  padding: 14px 14px max(16px, env(safe-area-inset-bottom)) 14px;
  border: 1px solid var(--border);
  border-bottom: none;
  transform: translateY(20px);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kb-actionsheet-overlay.is-open .kb-actionsheet {
  transform: translateY(0);
}
@media (min-width: 540px) {
  .kb-actionsheet-overlay { align-items: center; }
  .kb-actionsheet {
    max-width: 420px;
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--border);
    padding: 14px;
  }
}
.kb-actionsheet-title {
  padding: 4px 10px 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.kb-actionsheet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb-actionsheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.kb-actionsheet-item:active,
.kb-actionsheet-item:hover {
  background: var(--bg-elevated);
}
.kb-actionsheet-item.is-danger {
  color: #dc2626;
}
.kb-actionsheet-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.kb-actionsheet-item.is-danger .kb-actionsheet-icon {
  background: color-mix(in srgb, #dc2626 12%, transparent);
}
.kb-actionsheet-icon svg { width: 18px; height: 18px; }
.kb-actionsheet-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.kb-actionsheet-label {
  font-size: var(--text-lg);
  font-weight: 600;
}
.kb-actionsheet-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.3;
}
.kb-actionsheet-cancel {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kb-actionsheet-cancel:active,
.kb-actionsheet-cancel:hover {
  background: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Page header with action icons (search, eventually edit)
   Title stays left, icons sit on the right matching the hamburger placement
   on the opposite side of the screen.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.kb-page-header-text { flex: 1; min-width: 0; }
.kb-page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.kb-header-icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.06s;
  -webkit-tap-highlight-color: transparent;
}
.kb-header-icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.kb-header-icon-btn:active { transform: scale(0.96); }
.kb-header-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-header-icon-btn svg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   KB — Full-screen search overlay (replaces the inline search bar)
   Top bar: back arrow, input, tag-manage button. Body: results.
   Slides in from the right on mobile; appears as a centered modal on
   desktop sized for comfortable scanning.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.2s, transform 0.22s;
}
.kb-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.kb-search-overlay-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px max(12px, env(safe-area-inset-left)) 12px max(12px, env(safe-area-inset-right));
  /* Full-screen search overlay → clear the status bar robustly (see --safe-top). */
  padding-top: var(--safe-top);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.kb-search-overlay-back {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kb-search-overlay-back:hover { background: var(--bg-elevated); }
.kb-search-overlay-back svg { width: 22px; height: 22px; }
.kb-search-overlay-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.kb-search-overlay-icon {
  position: absolute;
  left: 12px;
  width: 18px; height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.kb-search-overlay-input {
  width: 100%;
  padding: 11px 38px 11px 38px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-lg);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.12s;
}
.kb-search-overlay-input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
}
.kb-search-overlay-input::placeholder { color: var(--text-muted); }
.kb-search-overlay-clear {
  position: absolute;
  right: 8px;
  width: 26px; height: 26px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.kb-search-overlay-clear:hover { background: var(--bg-base); color: var(--text-primary); }
.kb-search-overlay-clear svg { width: 14px; height: 14px; }
.kb-search-overlay-tags {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kb-search-overlay-tags:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
.kb-search-overlay-tags svg { width: 18px; height: 18px; }
.kb-search-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px max(14px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}
.kb-search-overlay-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 60px 20px 40px;
  color: var(--text-muted);
}
.kb-search-overlay-empty svg {
  width: 44px; height: 44px;
  stroke-width: 1.4;
  margin-bottom: 14px;
  opacity: 0.5;
}
.kb-search-overlay-empty-title {
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.kb-search-overlay-empty-sub {
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 340px;
  margin: 0;
}

/* On larger screens, keep search readable but max-width content */
@media (min-width: 768px) {
  .kb-search-overlay-body { max-width: 720px; margin: 0 auto; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Organise mode toggle + edit-mode card layout
   The folder-cog chip sits next to the Folders chip and toggles "edit
   mode" for the entire folders/documents view. In edit mode each card
   transforms into an editable row with drag handle + ▲/▼ chips on the
   title row and [Rename][Move][Delete] action row below.
   ═══════════════════════════════════════════════════════════════════════ */

/* Action row — Rename / Move / Delete. Each button has icon + label so
   nothing's ambiguous, and tap targets are comfortable on phones. */
.kb-edit-actions {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin-top: 6px;
}
/* Base .kb-edit-action button — compact chip matching the callout
   stepper's Hold/Cancel chips (11px / 700 / 5px 10px / radius-sm).
   Same vocabulary anywhere the user is in "edit/organise" mode so
   labels feel like a tidy set of small actions, not chunky buttons. */
.kb-edit-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.06s;
  -webkit-tap-highlight-color: transparent;
}
/* Inside .kb-edit-actions rows (card-embedded Rename/Move/Delete on
   a folder / instruction / attachment) keep the labels visible — the
   compact chip is small enough that all three fit on mobile without
   wrapping, so we don't need icon-only mode any more. */
.kb-edit-actions .kb-edit-action {
  width: auto;
  height: auto;
  gap: 5px;
  padding: 5px 10px;
}
.kb-edit-actions .kb-edit-action span {
  display: inline;
}
.kb-edit-action:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
}
.kb-edit-action:active { transform: scale(0.96); }
.kb-edit-action svg { width: 12px; height: 12px; stroke-width: 2.2; flex-shrink: 0; }
.kb-edit-actions .kb-edit-action svg { width: 12px; height: 12px; }
.kb-edit-action.kb-edit-action-danger {
  color: #f87171;
  border-color: color-mix(in srgb, #dc2626 35%, var(--border-strong));
}
.kb-edit-action.kb-edit-action-danger:hover {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #fca5a5;
  border-color: color-mix(in srgb, #dc2626 50%, transparent);
}
/* ═══════════════════════════════════════════════════════════════════════
   KB — Desktop density tightening
   On wide screens, restore labels for the card-embedded action row
   since space allows. Buttons stay right-aligned and compact, but
   with their text visible so the affordance is unambiguous on a
   non-touch interface.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Cards: tighter padding + slightly smaller font for more density */
  .kb-folder-card { padding: 10px 12px; }
  .kb-folder-card-name { font-size: var(--text-base); }
  .kb-folder-card-meta { font-size: var(--text-xs); }

  /* Card-embedded action row: bring labels back since we have room */
  .kb-edit-actions {
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
  }
  .kb-edit-actions .kb-edit-action {
    /* Reset the mobile fixed-square sizing so labelled chips fit naturally */
    width: auto;
    height: auto;
    gap: 6px;
    padding: 6px 11px;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
  }
  .kb-edit-actions .kb-edit-action span { display: inline; }
  .kb-edit-actions .kb-edit-action svg { width: 13px; height: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Per-item 3-dot kebab menu (folders)
   ═══════════════════════════════════════════════════════════════════════ */
.kb-item-menu {
  position: fixed;
  z-index: 2200;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  padding: 4px;
  min-width: 152px;
}
.kb-item-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  border-radius: 7px;
  font-family: var(--body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.kb-item-menu-item:hover { background: var(--bg-elevated); }
.kb-item-menu-item.is-danger { color: var(--danger); }
.kb-item-menu-item.is-danger:hover { background: var(--danger-soft); }
.kb-item-menu-icon { width: 15px; height: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.kb-item-menu-icon svg { width: 15px; height: 15px; }
/* ⋯ card menu button — the one management trigger on every browse card
   (folder / document / file / note). GHOST at rest per the app-wide
   icon-button standard (COMPONENTS.md §12): bare muted glyph, hover a soft
   tint, visible focus ring, always shown (never hover-only). Sits as a
   trailing flex child (folder / doc / file) or in the note top-right group. */
.kb-card-menu-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.kb-card-menu-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}
.kb-card-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-card-menu-btn svg { width: 18px; height: 18px; pointer-events: none; }

/* Note card: group the visibility pill + ⋯ on the right of the top row. */
.entry-card-top-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   KB — Unified list: actions strip + system folder cards
   The tabs row is gone. A small two-button strip sits where it used to:
   New-folder + Upload on the left, primary + on the right. Below it, the
   unified folder list bookends user folders with two system cards
   (Captures at top, Archive at bottom).
   ═══════════════════════════════════════════════════════════════════════ */
.kb-actions-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

/* Empty-state helper for an empty middle (no user folders yet) */
.kb-folder-list-empty {
  padding: 16px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.kb-folder-list-empty p { margin: 0; }

/* System folder cards (Captures, Archive) — visually parallel to user
   folders so the eye reads them as part of the same list, but with a
   distinct accent + icon family. Captures uses the accent (turquoise),
   Archive uses a softer grey-tone. Neither becomes editable in
   organise mode — they're owned by the system, not the user. */
.kb-folder-card.kb-folder-card-system {
  border-color: var(--border);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-elevated) 70%, transparent),
    var(--bg-surface)
  );
}
.kb-folder-card.kb-folder-card-captures {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.kb-folder-card.kb-folder-card-captures:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.kb-folder-card.kb-folder-card-archive {
  border-color: var(--border);
  opacity: 0.85;
}
.kb-folder-card.kb-folder-card-archive:hover {
  opacity: 1;
}

/* System icon tiles — coloured backplates so the cards read as different
   from regular folders without shouting. */
.kb-folder-card-system .kb-folder-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
/* System tiles match the plain folder tiles: soft FILL only, no border —
   the distinct fill colour is the identity signal (accent = Captures,
   muted = Archive). Keeps the leading-icon column uniform. */
.kb-system-icon-captures {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.kb-system-icon-archive {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-secondary);
}
.kb-folder-card-system .kb-folder-card-icon svg {
  width: 18px; height: 18px;
  stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
   KB — Sidebar tree sections (Captures / Folders / Archive)
   The sidebar is now divided into three sections matching the iOS Mail
   pattern: Captures at top, Folders in middle, Archive at bottom. Each
   section has a small uppercase label.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-tree-section { margin-bottom: 14px; }
.kb-tree-section-bottom { margin-top: 14px; margin-bottom: 0; }
.kb-tree-section-label {
  font-family: var(--display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px 12px;
}

/* System rows in sidebar — Captures + Archive. They live in their own
   sections, distinct from user folders. Same row geometry as folder
   rows so the sidebar reads as one consistent column. */
.kb-tree-row.kb-tree-row-system {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent;
}
.kb-tree-row.kb-tree-row-system:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.kb-tree-row.kb-tree-row-system.is-selected {
  background: var(--accent-soft);
  color: var(--text-primary);
}
.kb-tree-row.kb-tree-row-system.is-selected .kb-tree-icon-captures {
  color: var(--accent);
}

.kb-tree-icon-captures { color: var(--accent); }
.kb-tree-icon-archive  { color: var(--text-muted); }

/* Right-aligned count pill on the sidebar rows — same idea as the
   tab badges but smaller. */
.kb-tree-count {
  margin-left: auto;
  background: var(--bg-base);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-md);
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}
.kb-tree-row-system.is-selected .kb-tree-count {
  background: color-mix(in srgb, var(--accent) 24%, var(--bg-base));
  color: var(--accent);
}

/* Breadcrumb back chip — first crumb gets a clear chevron-back icon
   and a stronger visual treatment so it reads unambiguously as a back
   button on mobile. The rest of the breadcrumb path follows after for
   power users who want to jump multiple levels at once. */
.kb-crumb.kb-crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.kb-crumb.kb-crumb-back:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}
.kb-crumb.kb-crumb-back svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Document card top row: ref-id and date on left, dept pill right-aligned —
   matching folder cards' titlerow for visual consistency across the app. */
.kb-instr-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.kb-instr-card-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.kb-instr-card-top .kb-visibility-pill {
  flex-shrink: 0;
  margin-left: auto;
}

/* Calm the department / visibility pill on KB cards — neutral body with the
   department colour kept on the ICON only, matching the two-tier card rule
   (CLAUDE.md §4): calm context chips, colour reserved for signals. Covers
   document, file, note and folder cards. The reader header keeps the fuller
   coloured pill. */
.kb-instr-card-top .kb-visibility-pill,
.entry-card-top .kb-visibility-pill,
.kb-folder-card-titlerow .kb-visibility-pill {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
  padding: 4px 9px;
}
.kb-instr-card-top .kb-visibility-pill .kb-visibility-pill-icon,
.entry-card-top .kb-visibility-pill .kb-visibility-pill-icon,
.kb-folder-card-titlerow .kb-visibility-pill .kb-visibility-pill-icon {
  color: var(--vp-color, var(--accent));
}

/* Back chip for Captures and Archive views — mobile-only since desktop
   has the sidebar to navigate back. Hidden on desktop, shown on mobile
   so the user always has a clear way out of these system views. */
.kb-back-chip-mobile { margin-bottom: 14px; }
@media (min-width: 1024px) {
  .kb-back-chip-mobile { display: none; }
}

/* Ensure action buttons don't get the 300ms iOS tap delay. */
.kb-edit-action {
  touch-action: manipulation;
}

/* Entry card top: dept pill right-aligned, meta wraps gracefully on
   narrow screens — matches the layout pattern used by folder + doc
   cards across the app. */
.entry-card-top {
  flex-wrap: wrap;
  gap: 8px;
}
.entry-card-top .entry-card-meta { flex: 1; min-width: 0; }
.entry-card-top .kb-visibility-pill { flex-shrink: 0; }

/* Camera + mic buttons next to Send. Same shape and turquoise tint as
   the + chip family — but with a softer fill so Send still reads as the
   primary action. All three sit on the right edge of the input row,
   forming a clear "actions" cluster that invites interaction. */
.quick-action-prominent {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.06s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.quick-action-prominent:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.quick-action-prominent:active { transform: scale(0.96); }
.quick-action-prominent svg { width: 20px; height: 20px; }

/* Actions strip — left cluster groups Organise + New folder together as
   "structural tools". The + on the right stays as primary content
   creation. Two clear roles, no overlap. */
.kb-actions-strip-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

/* Compact icon button used for "New folder" / "Upload file". Originally a GHOST
   glyph per the app-wide bar-icon note (css/09 .app-bar-menu, 2026-06-10), but
   Prompt 27 (2026-07-06) gives THIS KB action strip a resting outline (bg +
   border) so the buttons read as tappable at rest instead of vanishing into the
   header. The filled Capture button stays the row's ONE loud action — outlined
   is calmer than filled, so that principle holds; the bare-glyph .app-bar-menu
   standard elsewhere is untouched. */
.kb-actions-iconbtn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.06s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kb-actions-iconbtn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.kb-actions-iconbtn:active { transform: scale(0.94); }
.kb-actions-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-actions-iconbtn svg { width: 22px; height: 22px; }

/* Prompt 28 (2026-07-06): on desktop (>=1024px) the "New folder" / "Upload file"
   strip buttons show a text label beside the icon so the action is legible at a
   glance; icon-only stays on mobile to save width. The label span is hidden
   below the breakpoint (the button keeps its 38px square). The AI sparkle
   (#kbAiCreate / .kb-tabs-add) stays icon-only by design. */
.kb-actions-iconbtn-label { display: none; }
@media (min-width: 1024px) {
  .kb-actions-iconbtn--labelled {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
  }
  .kb-actions-iconbtn--labelled .kb-actions-iconbtn-label {
    display: inline;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
  }
}

/* The folder-titlebar "+ Add" — the ONE contextual add action for a folder
   (Prompt 28). A standard tasks-btn-primary (matches the Capture button's
   weight + ~44px tap target); only the glyph is sized down to sit neatly
   beside the folder name. Icon + label on every breakpoint. */
.kb-folder-add-btn svg { width: 18px; height: 18px; }

/* 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) {
  .modal-header { padding-left: 14px; padding-right: 14px; }
  .modal-body   { padding-left: 14px; padding-right: 14px; }
  .modal-footer { padding-left: 14px; padding-right: 14px; }
  .kb-actionsheet-item { padding-left: 12px; padding-right: 12px; }
  .kb-actionsheet-title { padding: 4px 8px 12px; }
  .kb-folder-list-empty { padding: 16px 12px; }
  .kb-vis-everyone { padding: 12px 12px; }
  .kb-vis-row { padding: 10px 10px; }
  .kb-vis-warning { padding: 10px 10px; }
  .kb-vis-empty { padding: 14px; }
}