.archive-app {
  display: flex;
  flex: 1;
  min-height: 0;
  /* Shared tree / lens row interaction tokens (hover → active → focus → drop) */
  --bb-tree-hover-bg: color-mix(in srgb, var(--accent, #2563eb) 14%, #f3f7ff);
  --bb-tree-hover-edge: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
  --bb-tree-active-bg: #d4e3ff;
  --bb-tree-active-hover-bg: color-mix(in srgb, var(--accent, #2563eb) 22%, #d4e3ff);
  --bb-tree-active-hover-edge: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
  --bb-tree-focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 45%, transparent);
  --bb-tree-motion: 140ms ease;
}

#groupRoot,
#researchRoot,
#photoAlbumRoot {
  --bb-tree-hover-bg: color-mix(in srgb, var(--accent, #2563eb) 14%, #f3f7ff);
  --bb-tree-hover-edge: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
  --bb-tree-active-bg: #d4e3ff;
  --bb-tree-active-hover-bg: color-mix(in srgb, var(--accent, #2563eb) 22%, #d4e3ff);
  --bb-tree-active-hover-edge: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
  --bb-tree-focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 45%, transparent);
  --bb-tree-motion: 140ms ease;
}

/* Sidebar */

.archive-sidebar {
  width: var(--sidebar-width, 480px);
  border-right: 1px solid #ddd;
  background: #fafafa;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: var(--sidebar-min-width, 280px);
  max-width: var(--sidebar-max-width, 480px);
}

/* Sidebar resize affordance — tuned via --bb-sidebar-resize-* (theme + a11y-views.css) */
:root {
  --bb-sidebar-resize-handle-width: 8px;
  --bb-sidebar-resize-line: color-mix(in srgb, var(--accent, #2a4d8f) 10%, transparent);
  --bb-sidebar-resize-line-active: color-mix(in srgb, var(--accent, #2a4d8f) 32%, transparent);
  --bb-sidebar-resize-line-width: 1px;
  --bb-sidebar-resize-line-width-active: 2px;
  --bb-sidebar-resize-grip: color-mix(in srgb, var(--accent, #2a4d8f) 28%, transparent);
  --bb-sidebar-resize-grip-active: color-mix(in srgb, var(--accent, #2a4d8f) 55%, transparent);
  --bb-sidebar-resize-grip-opacity: 0.45;
  --bb-sidebar-resize-grip-opacity-active: 1;
  --bb-sidebar-resize-grip-size: 3px;
  --bb-sidebar-resize-grip-gap: 6px;
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: calc(var(--bb-sidebar-resize-handle-width, 8px) / -2);
  width: var(--bb-sidebar-resize-handle-width, 8px);
  height: 100%;
  cursor: col-resize;
  z-index: 20;
}

.sidebar-resize-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: var(--bb-sidebar-resize-grip-size, 3px);
  height: var(--bb-sidebar-resize-grip-size, 3px);
  border-radius: 50%;
  background: var(--bb-sidebar-resize-grip);
  box-shadow:
    0 calc(-1 * var(--bb-sidebar-resize-grip-gap, 6px)) 0 var(--bb-sidebar-resize-grip),
    0 var(--bb-sidebar-resize-grip-gap, 6px) 0 var(--bb-sidebar-resize-grip);
  opacity: var(--bb-sidebar-resize-grip-opacity, 0.45);
  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    width 0.12s ease,
    height 0.12s ease;
  pointer-events: none;
}

.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 0;
  width: var(--bb-sidebar-resize-line-width, 1px);
  height: 100%;
  background: var(--bb-sidebar-resize-line);
  transition: width 0.12s ease, background 0.12s ease;
  pointer-events: none;
}

.archive-sidebar:hover .sidebar-resize-handle::before,
.archive-sidebar.is-resizing .sidebar-resize-handle::before,
.sidebar-resize-handle:hover::before,
.sidebar-resize-handle:focus-visible::before {
  opacity: var(--bb-sidebar-resize-grip-opacity-active, 1);
  background: var(--bb-sidebar-resize-grip-active);
  box-shadow:
    0 calc(-1 * var(--bb-sidebar-resize-grip-gap, 6px)) 0 var(--bb-sidebar-resize-grip-active),
    0 var(--bb-sidebar-resize-grip-gap, 6px) 0 var(--bb-sidebar-resize-grip-active);
}

.archive-sidebar:hover .sidebar-resize-handle::after,
.archive-sidebar.is-resizing .sidebar-resize-handle::after,
.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:focus-visible::after {
  width: var(--bb-sidebar-resize-line-width-active, 2px);
  background: var(--bb-sidebar-resize-line-active);
}

.sidebar-resize-handle:focus-visible {
  outline: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bb-collapse-all-btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  min-height: 28px;
  white-space: nowrap;
}

.archive-cabinet-lens-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Sidebar header: title row (labeled create CTA on right), then lens row */
.sidebar-header--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sidebar-header-top .sidebar-title {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Top-tier create CTA in mode sidebars (labeled: + Archive / + Space / …) */
.sidebar-create-btn {
  flex-shrink: 0;
  width: auto;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #2a4d8f) 38%, var(--border, #ccc));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2a4d8f) 12%, var(--surface, #fff));
  color: var(--accent, #2a4d8f);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.sidebar-create-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #2a4d8f) 22%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--accent, #2a4d8f) 58%, var(--border, #ccc));
}

.sidebar-create-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.sidebar-create-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #2a4d8f) 45%, transparent);
  outline-offset: 2px;
}

.archive-cabinet-create-btn {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar-header--stacked .sidebar-header-actions {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.sidebar-header--stacked .archive-lens-select,
.sidebar-header--stacked .photo-album-view-select {
  width: 100%;
  max-width: none;
}

.lens-toggle-btn {
  white-space: nowrap;
}

.archive-lens-select {
  cursor: pointer;
  max-width: 9.5rem;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  appearance: auto;
}

/* Archive — Cabinet lens: sidebar hidden; wide cabinet | editor | details */
.archive-app--cabinet .archive-sidebar {
  display: none !important;
}

/* Photo Album — Flip-View: hide tree sidebar and detail panel for canvas space */
.archive-app--flip .archive-sidebar {
  display: none !important;
}

.archive-app--flip .archive-main {
  flex: 1;
  min-width: 0;
}

.archive-app--flip .detail-panel {
  display: none;
}

.archive-app--flip .main-content {
  flex: 1;
  min-height: 0;
}

.archive-app--flip .note-editor-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.archive-app--cabinet .archive-main {
  flex: 1;
  min-width: 0;
}

.archive-app--cabinet .archive-narrative {
  display: none;
}

.archive-app--cabinet .main-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

.archive-app--cabinet .archive-cabinet-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 48%;
  min-width: 38%;
  max-width: 56%;
  min-height: 0;
  border-right: 1px solid #c5cad4;
  border-bottom: none;
  background: linear-gradient(165deg, #f0f2f8 0%, #e4e8f2 40%, #dce0e8 100%);
  box-sizing: border-box;
}

.archive-app--cabinet .note-editor-container {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

.archive-app--cabinet .detail-panel {
  flex: 0 0 200px;
  min-width: 160px;
  max-width: 240px;
}

.archive-cabinet-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.archive-cabinet-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3d4a63;
  text-transform: uppercase;
}

.archive-cabinet-context {
  font-size: 13px;
  color: #5a677a;
  flex: 1;
  min-width: 120px;
}

.archive-cabinet-archive-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.archive-cabinet-nav-btn {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 18px;
  line-height: 1;
  min-width: 28px;
}

.archive-cabinet-archive-select {
  flex: 1;
  min-width: 120px;
  max-width: 100%;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: #2a3340;
}

.archive-cabinet-lens-slot .archive-lens-select {
  max-width: 10rem;
}

.archive-cabinet-wall {
  flex: 1;
  overflow: auto;
  overflow-anchor: none;
  padding: 10px 10px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  align-content: start;
}

.archive-cabinet-hint {
  margin: 0;
  padding: 4px 10px;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(60, 70, 90, 0.75);
  background: rgba(255, 255, 255, 0.35);
}

.archive-cabinet-empty {
  margin: 0;
  padding: 20px;
  color: #5a677a;
  font-size: 13px;
  text-align: center;
  grid-column: 1 / -1;
}

.cabinet-block {
  /* Per-cabinet hue set in JS; mid tier shifts +38° so parent/child stay related but distinct */
  --cabinet-hue: 210;
  --cab-parent: hsl(var(--cabinet-hue), 55%, 46%);
  --cab-mid: hsl(calc(var(--cabinet-hue) + 38), 48%, 40%);
  --cab-child: hsl(var(--cabinet-hue), 42%, 56%);
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(30, 40, 60, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 5px solid color-mix(in srgb, var(--cab-parent) 92%, #1f2a44);
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-left-color 0.2s ease;
}

.cabinet-block:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 28px rgba(30, 40, 60, 0.1),
    var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 20%, transparent));
  border-left-color: color-mix(in srgb, var(--cab-parent) 100%, #000);
}

.cabinet-block--dragging {
  opacity: 0.6;
}

.cabinet-block.active {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(30, 40, 60, 0.1),
    0 0 0 2px color-mix(in srgb, var(--cab-parent) 28%, transparent);
  border-left-width: 6px;
}

.cabinet-block.lens-path {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 10px 26px rgba(30, 40, 60, 0.09),
    0 0 0 1px color-mix(in srgb, var(--cab-parent) 22%, transparent);
}

.cabinet-block.active .cabinet-face-name,
.cabinet-block.lens-path .cabinet-face-name {
  border-bottom-color: color-mix(in srgb, var(--cab-parent) 95%, transparent);
}

.cabinet-block.lens-path .cabinet-face-name {
  font-weight: 600;
}

.cabinet-shelf.lens-path .cabinet-shelf-head {
  border-color: color-mix(in srgb, var(--cab-mid) 40%, rgba(0, 0, 0, 0.08));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 18%, #fff) 0%,
    color-mix(in srgb, var(--cab-mid) 6%, rgba(255, 255, 255, 0.88)) 100%
  );
  color: color-mix(in srgb, var(--cab-mid) 62%, #2a3340);
}

.cabinet-shelf.active .cabinet-shelf-head {
  border-color: color-mix(in srgb, var(--cab-mid) 48%, rgba(0, 0, 0, 0.08));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 22%, #fff) 0%,
    color-mix(in srgb, var(--cab-mid) 8%, rgba(255, 255, 255, 0.9)) 100%
  );
}

.cabinet-face {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.cabinet-face-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.cabinet-face-glyph {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
}

.cabinet-face-titles {
  flex: 1;
  min-width: 0;
}

.cabinet-face-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2a3340;
  border-bottom: 2px solid color-mix(in srgb, var(--cab-parent) 90%, transparent);
  padding-bottom: 2px;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabinet-face-meta {
  font-size: 11px;
  color: #6b7484;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Peek / capacity only when open — prioritize minimal closed height */
.cabinet-capacity,
.cabinet-peek {
  display: none;
}

.cabinet-block--open .cabinet-face {
  padding-bottom: 8px;
}

.cabinet-block--open .cabinet-capacity {
  display: block;
  margin: 6px 0 0;
}

.cabinet-capacity-track {
  height: 3px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.cabinet-capacity-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-parent) 88%, transparent),
    color-mix(in srgb, var(--cab-child) 85%, transparent)
  );
  transition: width 0.25s ease;
}

.cabinet-peek {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: #5a677a;
  line-height: 1.35;
}

.cabinet-peek li {
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabinet-peek-empty {
  font-style: italic;
  color: #8a92a0;
}

.cabinet-interior {
  border-top: 1px solid color-mix(in srgb, var(--cab-parent) 18%, rgba(0, 0, 0, 0.06));
  padding: 2px 8px 8px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cab-parent) 7%, rgba(255, 255, 255, 0.72)) 0%,
    rgba(255, 255, 255, 0.55) 100%
  );
  border-radius: 0 0 12px 12px;
  animation: cabinet-open 0.22s ease;
}

.cabinet-interior-empty {
  margin: 6px 0 0;
  font-size: 11px;
  color: #7a8494;
  font-style: italic;
}

@keyframes cabinet-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mid tier (shelf / persona / board / subtopic) — shifted hue + left rail */
.cabinet-shelf {
  margin-top: 6px;
  position: relative;
  padding-left: 2px;
}

.cabinet-shelf-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cab-mid) 28%, rgba(0, 0, 0, 0.08));
  border-left: 4px solid color-mix(in srgb, var(--cab-mid) 92%, #1f2a44);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 14%, #fff) 0%,
    color-mix(in srgb, var(--cab-mid) 3%, rgba(255, 255, 255, 0.82)) 100%
  );
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--cab-mid) 48%, #2a3340);
  cursor: pointer;
  text-align: left;
}

.cabinet-shelf-head:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 20%, #fff) 0%,
    var(--bb-tree-hover-bg, color-mix(in srgb, var(--accent, #2563eb) 10%, #fff)) 100%
  );
  box-shadow: var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-mid) 25%, transparent));
}

.cabinet-shelf-icon {
  flex-shrink: 0;
  opacity: 0.8;
  color: color-mix(in srgb, var(--cab-mid) 70%, #3d4a63);
}

.cabinet-shelf-label {
  flex: 1;
  min-width: 0;
}

.cabinet-shelf-count {
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--cab-mid) 55%, #6b7484);
  background: color-mix(in srgb, var(--cab-mid) 12%, rgba(0, 0, 0, 0.04));
  padding: 1px 0.45rem;
  border-radius: 999px;
}

/* Child notes — nested under mid rail with parent-hue accent */
.cabinet-shelf-rack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-left: 8px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid color-mix(in srgb, var(--cab-child) 55%, transparent);
}

.cabinet-note-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cab-child) 32%, rgba(0, 0, 0, 0.08));
  border-left: 3px solid color-mix(in srgb, var(--cab-parent) 78%, var(--cab-child));
  background: color-mix(in srgb, var(--cab-child) 16%, #eef2f8);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.cabinet-note-card:hover {
  border-color: color-mix(in srgb, var(--cab-parent) 45%, rgba(130, 170, 255, 0.7));
  border-left-color: var(--cab-parent);
  background: color-mix(in srgb, var(--cab-child) 22%, #e8eeff);
  box-shadow:
    var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-parent) 22%, transparent)),
    0 3px 14px color-mix(in srgb, var(--cab-parent) 14%, transparent);
}

.cabinet-note-card--active {
  background: color-mix(in srgb, var(--cab-parent) 14%, #e4ecf8);
  border-color: color-mix(in srgb, var(--cab-parent) 42%, rgba(76, 175, 80, 0.35));
  border-left-color: var(--cab-parent);
  border-left-width: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cab-parent) 22%, transparent);
  font-weight: 700;
}

.cabinet-note-card--active:hover {
  border-color: color-mix(in srgb, var(--cab-parent) 50%, rgba(130, 170, 255, 0.75));
  background: color-mix(in srgb, var(--cab-parent) 16%, #e2ebff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cab-parent) 28%, transparent),
    0 3px 14px color-mix(in srgb, var(--cab-parent) 16%, transparent);
}

.cabinet-note-card-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabinet-note-connector {
  flex-shrink: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--cab-parent) 55%, #7b8cc8);
  opacity: 0.9;
}

.sidebar-title {
  font-weight: bold;
  color: var(--accent);
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #4caf50;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: #45a049;
}

.sidebar-search {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
}

form.sidebar-search {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sidebar-search input {
  flex: 1;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

.archive-tree {
  list-style: none;
  padding-left: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
}

/* Zero top-tier nodes — instructional meme CTA in tree slot */
.archive-tree:has(> .mode-tree-empty-cta) {
  display: flex;
  flex-direction: column;
}

/* Mode load failure — not the same as empty-tree CTA */
.mode-load-error {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #b91c1c 45%, var(--border, #ccc));
  background: color-mix(in srgb, #fecaca 55%, var(--bg, #fff));
  color: #7f1d1d;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-load-error__msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.mode-load-error__retry {
  align-self: flex-start;
}

html[data-theme="dark"] .mode-load-error {
  border-color: color-mix(in srgb, #f87171 40%, var(--border, #444));
  background: color-mix(in srgb, #7f1d1d 35%, var(--bg, #111));
  color: #fecaca;
}

.mode-tree-empty-cta {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  min-height: 180px;
  display: flex;
  flex: 1 1 auto;
}

.mode-tree-empty-cta__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 10px 8px 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent, #2a4d8f) 42%, var(--border, #ccc));
  background:
    radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--accent, #2a4d8f) 16%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--surface, #fff) 92%, var(--accent, #2a4d8f)), var(--surface, #fafafa));
  box-sizing: border-box;
}

.mode-tree-empty-cta__inner--filter {
  min-height: 0;
  padding: 14px 12px;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--border, #ddd));
}

.mode-tree-empty-cta__pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--accent, #2a4d8f);
  margin: -2px auto 0;
  max-width: 140px;
}

.mode-tree-empty-cta__arrow-svg {
  display: block;
  transform-origin: 50% 100%;
  animation: mode-tree-empty-cta-nudge 1.8s ease-in-out infinite;
}

.mode-tree-empty-cta__pointer-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
  text-align: center;
}

.mode-tree-empty-cta__card {
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2a4d8f) 22%, var(--border, #ddd));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent, #2a4d8f) 10%, transparent);
}

.mode-tree-empty-cta__kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #2a4d8f) 75%, var(--text-muted, #64748b));
}

.mode-tree-empty-cta__lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #1f2937);
}

.mode-tree-empty-cta__btn-ref {
  color: var(--accent, #2a4d8f);
  white-space: nowrap;
}

.mode-tree-empty-cta__action {
  width: 100%;
  justify-content: center;
}

.mode-tree-empty-cta__ghost {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent, #2a4d8f) 35%, var(--border, #ccc));
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    color-mix(in srgb, var(--accent, #2a4d8f) 6%, transparent) 4px,
    color-mix(in srgb, var(--accent, #2a4d8f) 6%, transparent) 8px
  );
  opacity: 0.9;
}

.mode-tree-empty-cta__ghost-caret {
  color: color-mix(in srgb, var(--accent, #2a4d8f) 55%, #94a3b8);
  font-size: 12px;
}

.mode-tree-empty-cta__ghost-chip {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text, #334155) 70%, transparent);
  font-style: italic;
}

.mode-tree-empty-cta__ghost-hint {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.mode-tree-empty-cta--cabinet {
  min-height: 220px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
}

.mode-tree-empty-cta--cabinet .mode-tree-empty-cta__inner {
  max-width: 420px;
  margin: 0 auto;
}

/* Pulse the real create control while empty CTA is showing */
.mode-create-btn--invite {
  position: relative;
  animation: mode-create-btn-invite 1.6s ease-in-out infinite;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent, #2a4d8f) 35%, transparent),
    0 0 0 6px color-mix(in srgb, var(--accent, #2a4d8f) 12%, transparent);
  z-index: 1;
}

@keyframes mode-tree-empty-cta-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes mode-create-btn-invite {
  0%,
  100% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent, #2a4d8f) 30%, transparent),
      0 0 0 5px color-mix(in srgb, var(--accent, #2a4d8f) 10%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent, #2a4d8f) 48%, transparent),
      0 0 0 9px color-mix(in srgb, var(--accent, #2a4d8f) 16%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-tree-empty-cta__arrow-svg,
  .mode-create-btn--invite {
    animation: none;
  }
}

/* Pinned footer: create/delete + rename/share (Archive, Group, Research, Journal) */
.sidebar-footer {
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
}

.sidebar-footer .sidebar-tree-toolbar {
  margin-top: 0;
}

/* +Category / +Note / Delete — first action row in sidebar footer */
.sidebar-tree-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.sidebar-tree-toolbar .pill-btn {
  flex: 1 1 calc(33.33% - 4px);
  min-width: 72px;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.sidebar-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.sidebar-actions .pill-btn {
  flex: 1;
}

#archiveRoot .archive-sidebar,
#groupRoot .archive-sidebar,
#researchRoot .archive-sidebar,
#photoAlbumRoot .archive-sidebar {
  min-height: 0;
  overflow-x: hidden;
  /* One scroll owner: the tree/wall — dual sidebar+tree scroll caused sporadic jumps. */
  overflow-y: hidden;
}

#photoAlbumRoot #photoAlbumTree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#archiveRoot #archiveTree,
#groupRoot #groupTree,
#researchRoot #researchTree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 8px breathing room between search/clear row and first tree node */
#archiveRoot #archiveTree::before,
#groupRoot #groupTree::before,
#researchRoot #researchTree::before,
#photoAlbumRoot #photoAlbumTree::before {
  content: "";
  display: block;
  height: 8px;
}

.group-mode-hint {
  margin: 0 0 10px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

/* Photo Album upload quota (members / guests) */
.photo-album-usage {
  margin: 0 0 10px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.photo-album-usage__label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  line-height: 1.3;
}
.photo-album-usage__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.25);
  overflow: hidden;
}
.photo-album-usage__bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #0f766e;
  transition: width 0.25s ease;
}
.photo-album-usage--near .photo-album-usage__bar {
  background: #b45309;
}
.photo-album-usage--full .photo-album-usage__bar {
  background: #b91c1c;
}
.photo-album-usage--full .photo-album-usage__label {
  color: #991b1b;
}

.group-level-space {
  font-weight: 700;
  color: #1e3a5f;
}

/* Group tree: full row is clickable; li is draggable so hit areas past the label need pointer too */
#groupTree li {
  cursor: pointer;
}

#groupTree .tree-rename-input {
  cursor: text;
}

.tree-level-shared-root {
  font-weight: 700;
  color: #0f766e;
}

.tree-level-shared-ref {
  font-size: 13px;
  display: block;
  color: #0f766e;
  border-left: 3px solid #5eead4;
  padding-left: 6px;
  margin: 2px 0;
}

.tree-level-shared-ref.active {
  background: rgba(15, 118, 110, 0.12);
  border-radius: 4px;
}

.tree-shared-subtitle {
  font-size: 11px;
  color: #64748b;
  padding: 0 4px 4px 6px;
  line-height: 1.3;
}

.tree-shared-empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  padding: 2px 4px 6px 6px;
  line-height: 1.35;
}

.thread-comments-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.thread-comments-list {
  max-height: min(42vh, 520px);
  overflow-y: auto;
  margin: 8px 0;
  font-size: 13px;
}

.thread-comment-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}

.thread-comment-row {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.thread-comment-meta {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.thread-comment-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.thread-comment-compose textarea {
  flex: 1;
  min-width: 200px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #cfd4dc;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.archive-tree li {
  margin: 2px 0;
}

/* ------------------------------------------------------------------
   Tree row interaction system (Archive / Group / Research / Photo)
   States: idle → hover → active → focus-visible → drop-target
------------------------------------------------------------------- */
.archive-tree .tree-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color var(--bb-tree-motion),
    box-shadow var(--bb-tree-motion);
}

.archive-tree .tree-header .archive-node,
.archive-tree .tree-header .research-node,
.archive-tree .tree-header .photo-album-node {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-tree .tree-header:hover {
  background: var(--bb-tree-hover-bg);
  box-shadow: var(--bb-tree-hover-edge);
}

.archive-tree .tree-header:has(.archive-node.active, .research-node.active, .photo-album-node.active) {
  background: var(--bb-tree-active-bg);
}

.archive-tree .tree-header:has(.archive-node.active, .research-node.active, .photo-album-node.active):hover {
  background: var(--bb-tree-active-hover-bg);
  box-shadow: var(--bb-tree-active-hover-edge);
}

.archive-tree .tree-header:hover .archive-node,
.archive-tree .tree-header:hover .research-node,
.archive-tree .tree-header:hover .photo-album-node,
.archive-tree .tree-header:has(.archive-node.active, .research-node.active, .photo-album-node.active) .archive-node,
.archive-tree .tree-header:has(.archive-node.active, .research-node.active, .photo-album-node.active) .research-node,
.archive-tree .tree-header:has(.archive-node.active, .research-node.active, .photo-album-node.active) .photo-album-node {
  background: transparent;
}

.archive-tree .tree-header:hover .tree-caret {
  color: var(--accent, #2563eb);
}

.archive-tree .tree-header:focus-within {
  box-shadow: var(--bb-tree-hover-edge), var(--bb-tree-focus-ring);
}

.archive-tree .tree-header:has(.archive-node.active, .research-node.active, .photo-album-node.active):focus-within {
  box-shadow: var(--bb-tree-active-hover-edge), var(--bb-tree-focus-ring);
}

/* Leaf rows (notes / threads / photos) — full-width label, no layout jump */
.archive-tree li:has(> .archive-node):not(:has(> .tree-header)),
.archive-tree li:has(> .research-node):not(:has(> .tree-header)),
.archive-tree li:has(> .photo-album-node):not(:has(> .tree-header)),
.archive-tree li:has(> .photo-album-tree-photo-btn):not(:has(> .tree-header)) {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  transition:
    background-color var(--bb-tree-motion),
    box-shadow var(--bb-tree-motion);
}

.archive-tree li:not(:has(> .tree-header)):has(> .archive-node:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .research-node:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-node:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-tree-photo-btn:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .archive-node:focus-visible),
.archive-tree li:not(:has(> .tree-header)):has(> .research-node:focus-visible),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-node:focus-visible),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-tree-photo-btn:focus-visible) {
  background: var(--bb-tree-hover-bg);
  box-shadow: var(--bb-tree-hover-edge);
}

.archive-tree li:not(:has(> .tree-header)):has(> .archive-node.active),
.archive-tree li:not(:has(> .tree-header)):has(> .research-node.active),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-node.active),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-tree-photo-btn.active) {
  background: var(--bb-tree-active-bg);
}

.archive-tree li:not(:has(> .tree-header)):has(> .archive-node.active:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .research-node.active:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-node.active:hover),
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-tree-photo-btn.active:hover) {
  background: var(--bb-tree-active-hover-bg);
  box-shadow: var(--bb-tree-active-hover-edge);
}

.archive-tree li:not(:has(> .tree-header)):has(> .archive-node:hover) > .archive-node,
.archive-tree li:not(:has(> .tree-header)):has(> .research-node:hover) > .research-node,
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-node:hover) > .photo-album-node,
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-tree-photo-btn:hover) > .photo-album-tree-photo-btn,
.archive-tree li:not(:has(> .tree-header)):has(> .archive-node.active) > .archive-node,
.archive-tree li:not(:has(> .tree-header)):has(> .research-node.active) > .research-node,
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-node.active) > .photo-album-node,
.archive-tree li:not(:has(> .tree-header)):has(> .photo-album-tree-photo-btn.active) > .photo-album-tree-photo-btn {
  background: transparent;
}

.archive-node,
.research-node {
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  display: inline-block;
  transition: background-color var(--bb-tree-motion);
}

.archive-tree li > .archive-node,
.archive-tree li > .research-node,
.archive-tree li > .photo-album-node {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-node:hover,
.research-node:hover {
  background: var(--bb-tree-hover-bg);
}

.archive-node.active,
.research-node.active {
  background: var(--bb-tree-active-bg);
  font-weight: bold;
}

.archive-node.active.archive-node--search-reveal {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #2563eb) 28%, transparent);
  animation: archive-node-search-pulse 0.7s ease-out 2;
}

@keyframes archive-node-search-pulse {
  0%,
  100% {
    background: var(--bb-tree-active-bg);
  }
  50% {
    background: color-mix(in srgb, var(--accent, #2563eb) 22%, var(--bb-tree-active-bg));
  }
}

/* Photo Album tree — same selection chrome as archive / research */
#photoAlbumRoot .photo-album-node,
#photoAlbumRoot .photo-album-tree-photo-btn {
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  transition:
    background-color var(--bb-tree-motion),
    box-shadow var(--bb-tree-motion);
}

#photoAlbumRoot .photo-album-node {
  display: inline-block;
}

#photoAlbumRoot .photo-album-tree-photo-btn {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: none;
  background: transparent;
  padding: 3px 4px 3px 8px;
  font: inherit;
  color: inherit;
  border-radius: 6px;
}

#photoAlbumRoot .photo-album-node:hover,
#photoAlbumRoot .photo-album-tree-photo-btn:hover {
  background: var(--bb-tree-hover-bg);
}

#photoAlbumRoot .photo-album-node.active,
#photoAlbumRoot .photo-album-tree-photo-btn.active {
  background: var(--bb-tree-active-bg);
  font-weight: bold;
}

#photoAlbumRoot .photo-album-level-album {
  font-weight: bold;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .archive-app,
  #groupRoot,
  #researchRoot,
  #photoAlbumRoot {
    --bb-tree-motion: 0.01ms linear;
  }

  .archive-tree .tree-header,
  .archive-tree li:has(> .archive-node):not(:has(> .tree-header)),
  .archive-tree li:has(> .research-node):not(:has(> .tree-header)),
  .archive-tree li:has(> .photo-album-node):not(:has(> .tree-header)),
  .archive-tree li:has(> .photo-album-tree-photo-btn):not(:has(> .tree-header)),
  .archive-node,
  .research-node,
  #photoAlbumRoot .photo-album-node,
  #photoAlbumRoot .photo-album-tree-photo-btn,
  .book-archive-card,
  .book-chapter-card,
  .drawer-cabinet,
  .drawer-row,
  .drawer-note-card,
  .cabinet-block,
  .cabinet-shelf-head,
  .cabinet-note-card,
  .breadcrumb__crumb {
    transition: none !important;
  }
}

/* Archive lens: book/chapter/page hierarchy (parent → mid → child accents like Cabinet) */
.book-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  padding: 4px 2px 6px;
}

.book-archive-card,
.book-chapter-card {
  --cabinet-hue: 210;
  --cab-parent: hsl(var(--cabinet-hue), 55%, 46%);
  --cab-mid: hsl(calc(var(--cabinet-hue) + 38), 48%, 40%);
  --cab-child: hsl(var(--cabinet-hue), 42%, 56%);
  border: 1px solid color-mix(in srgb, var(--cab-parent) 22%, #d8dee9);
  border-left: 4px solid color-mix(in srgb, var(--cab-parent) 88%, #1f2a44);
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px;
  margin: 4px 0;
  transition:
    box-shadow var(--bb-tree-motion, 140ms ease),
    border-color var(--bb-tree-motion, 140ms ease),
    background-color var(--bb-tree-motion, 140ms ease);
}

.book-chapter-card {
  border-left-color: color-mix(in srgb, var(--cab-mid) 90%, #1f2a44);
  border-color: color-mix(in srgb, var(--cab-mid) 24%, #d8dee9);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 10%, #fff) 0%,
    #fff 100%
  );
  margin-left: 6px;
}

.book-archive-card:hover,
.book-chapter-card:hover {
  border-color: color-mix(in srgb, var(--cab-parent) 35%, #d8dee9);
  background: var(--bb-tree-hover-bg, color-mix(in srgb, var(--cab-parent) 10%, #f3f7ff));
  box-shadow: var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-parent) 20%, transparent));
}

.book-archive-card.active,
.book-chapter-card.active {
  border-color: color-mix(in srgb, var(--cab-parent) 45%, #8fb0e8);
  background: color-mix(in srgb, var(--cab-parent) 8%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cab-parent) 18%, transparent);
}

.book-archive-card.active:hover,
.book-chapter-card.active:hover {
  background: var(--bb-tree-active-hover-bg, color-mix(in srgb, var(--cab-parent) 14%, #d4e3ff));
  box-shadow:
    var(--bb-tree-active-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-parent) 28%, transparent)),
    0 0 0 2px color-mix(in srgb, var(--cab-parent) 16%, transparent);
}

/* Ancestor of the selected leaf — softer than .active */
.book-archive-card.lens-path,
.book-chapter-card.lens-path {
  border-color: color-mix(in srgb, var(--cab-parent) 38%, #d8dee9);
  background: color-mix(in srgb, var(--cab-parent) 5%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cab-parent) 14%, transparent);
}

/* Book lens — parent titles on selection path (brighter than inactive neighbors) */
.book-archive-card.active .book-title-btn,
.book-chapter-card.active .book-title-btn {
  color: color-mix(in srgb, var(--cab-parent) 55%, #1e4a8f);
  font-weight: 700;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-parent) 16%, #e8f0ff) 0%,
    color-mix(in srgb, var(--cab-parent) 4%, #f8fbff) 100%
  );
  box-shadow: inset 3px 0 0 var(--cab-parent);
}

.book-archive-card.lens-path .book-title-btn,
.book-chapter-card.lens-path .book-title-btn {
  color: color-mix(in srgb, var(--cab-parent) 70%, #1d4ed8);
  font-weight: 700;
  background: color-mix(in srgb, var(--cab-parent) 12%, #eef4ff);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cab-parent) 75%, #93c5fd);
}

.book-archive-card.lens-path .book-meta,
.book-chapter-card.lens-path .book-meta {
  color: color-mix(in srgb, var(--accent, #2a4d8f) 45%, #64748b);
}

.book-archive-card.active .book-meta,
.book-chapter-card.active .book-meta {
  color: color-mix(in srgb, var(--accent, #2a4d8f) 55%, #475569);
}

/* Soften unselected parent titles when a note/page is open */
#archiveTree:has(.book-page-btn.active) .book-archive-card:not(.active):not(.lens-path) .book-title-btn,
#archiveTree:has(.book-page-btn.active) .book-chapter-card:not(.active):not(.lens-path) .book-title-btn,
#groupTree:has(.book-page-btn.active) .book-archive-card:not(.active):not(.lens-path) .book-title-btn,
#groupTree:has(.book-page-btn.active) .book-chapter-card:not(.active):not(.lens-path) .book-title-btn,
#researchTree:has(.book-page-btn.active) .book-archive-card:not(.active):not(.lens-path) .book-title-btn,
#researchTree:has(.book-page-btn.active) .book-chapter-card:not(.active):not(.lens-path) .book-title-btn {
  color: #94a3b8;
  font-weight: 500;
}

.book-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.book-caret-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #475569;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.book-caret-btn:hover {
  background: #e9f1ff;
  color: #1e293b;
}

.book-title-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 3px 6px;
  margin: -1px -4px;
  color: #1f2a44;
  font-size: 13px;
  width: 100%;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.book-title-btn:hover {
  background: #e9f1ff;
  color: var(--accent);
  box-shadow: 0 1px 0 rgba(42, 77, 143, 0.12);
}

.book-meta {
  margin-left: 22px;
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}

.book-chapter-list {
  list-style: none;
  margin: 4px 0 0;
  padding-left: 8px;
}

.book-page-list {
  list-style: none;
  margin: 4px 0 0;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--cab-child, #64748b) 45%, transparent);
}

.book-page-item {
  margin: 3px 0;
}

.book-page-btn {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--cab-child, #64748b) 28%, #e2e8f0);
  border-left: 3px solid color-mix(in srgb, var(--cab-parent, #2a4d8f) 75%, var(--cab-child, #64748b));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cab-child, #64748b) 12%, #f8fafc);
  cursor: pointer;
  text-align: left;
  padding: 4px 8px;
  font-size: 12px;
  color: #334155;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.book-page-btn:hover {
  background: color-mix(in srgb, var(--cab-child, #64748b) 18%, #e9f1ff);
  border-color: color-mix(in srgb, var(--cab-parent, #2a4d8f) 40%, #c8d7f0);
  border-left-color: var(--cab-parent, #2a4d8f);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cab-parent, #2a4d8f) 12%, transparent);
  transform: translateY(-1px);
}

.book-page-btn.active {
  border-color: color-mix(in srgb, var(--cab-parent, #2a4d8f) 42%, #8fb0e8);
  border-left-color: var(--cab-parent, #2a4d8f);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--cab-parent, #2a4d8f) 12%, #e8f0ff);
  font-weight: 700;
}

/* Subtrees that *newly* opened this frame (JS adds .lens-expand-animate); not used on leaf clicks. */
@keyframes bizbarrel-lens-expand-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lens-expand-animate {
  animation: bizbarrel-lens-expand-in 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .lens-expand-animate {
    animation: none !important;
  }
}

/* Archive lens: Drawer / workshop (categories as drawers, notes as cards)
   — no mount/entry animations here: renderTree() rebuilds the sidebar on every
   selection, so opacity/transform keyframes replay and flash (especially on note click). */

.drawer-lens-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  padding: 4px 2px 8px;
}

.drawer-cabinet {
  --cabinet-hue: 210;
  --cab-parent: hsl(var(--cabinet-hue), 55%, 46%);
  --cab-mid: hsl(calc(var(--cabinet-hue) + 38), 48%, 40%);
  --cab-child: hsl(var(--cabinet-hue), 42%, 56%);
  border: 1px solid color-mix(in srgb, var(--cab-parent) 22%, #c4b8a8);
  border-left: 5px solid color-mix(in srgb, var(--cab-parent) 90%, #1f2a44);
  border-radius: 12px;
  background: linear-gradient(165deg, #faf8f4 0%, #f3efe8 100%);
  padding: 6px 8px 8px;
  margin: 6px 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 8px rgba(41, 37, 32, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drawer-cabinet:hover {
  border-color: color-mix(in srgb, var(--cab-parent) 35%, #c4b8a8);
  background: color-mix(in srgb, var(--cab-parent) 8%, #faf8f4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-parent) 18%, transparent)),
    0 4px 14px rgba(41, 37, 32, 0.08);
}

.drawer-cabinet.active {
  border-color: color-mix(in srgb, var(--cab-parent) 42%, #8fb0e8);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--cab-parent) 8%, #faf8f4) 0%,
    color-mix(in srgb, var(--cab-parent) 4%, #f3efe8) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 2px color-mix(in srgb, var(--cab-parent) 16%, transparent);
}

.drawer-cabinet.lens-path {
  border-color: color-mix(in srgb, var(--cab-parent) 32%, #c4b8a8);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--cab-parent) 5%, #faf8f4) 0%,
    #f5f1ea 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 0 1px color-mix(in srgb, var(--cab-parent) 12%, transparent);
}

.drawer-cabinet.active .drawer-cabinet-title {
  color: color-mix(in srgb, var(--cab-parent) 55%, #1e4a8f);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-parent) 16%, #e8f0ff) 0%,
    color-mix(in srgb, var(--cab-parent) 4%, rgba(255, 255, 255, 0.5)) 100%
  );
  box-shadow: inset 3px 0 0 var(--cab-parent);
}

.drawer-cabinet.lens-path .drawer-cabinet-title {
  color: color-mix(in srgb, var(--cab-parent) 65%, #1d4ed8);
  background: color-mix(in srgb, var(--cab-parent) 12%, #eef4ff);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cab-parent) 70%, #93c5fd);
}

.drawer-cabinet.active .drawer-cabinet-meta,
.drawer-cabinet.lens-path .drawer-cabinet-meta {
  color: color-mix(in srgb, var(--cab-parent) 48%, #78716c);
}

.drawer-cabinet-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.drawer-cabinet-caret {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #57534e;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.drawer-cabinet-caret:hover {
  background: rgba(42, 77, 143, 0.08);
  color: #1c1917;
}

.drawer-cabinet-title {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 3px 6px;
  margin: -1px -4px;
  color: #292524;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.drawer-cabinet-title:hover {
  background: rgba(42, 77, 143, 0.08);
  color: var(--accent);
}

.drawer-cabinet-meta {
  margin-left: 22px;
  margin-top: 2px;
  font-size: 11px;
  color: #78716c;
}

.drawer-stack {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--cab-mid) 28%, #d6d0c8);
  border-left: 4px solid color-mix(in srgb, var(--cab-mid) 88%, #1f2a44);
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 12%, rgba(255, 255, 255, 0.72)) 0%,
    rgba(255, 255, 255, 0.65) 100%
  );
  box-shadow: inset 0 2px 4px rgba(41, 37, 32, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drawer-row:hover {
  border-color: color-mix(in srgb, var(--cab-mid) 40%, #d6d0c8);
  background: color-mix(in srgb, var(--cab-mid) 10%, rgba(255, 255, 255, 0.72));
  box-shadow:
    inset 0 2px 4px rgba(41, 37, 32, 0.04),
    var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-mid) 18%, transparent));
}

.drawer-row.active {
  border-color: color-mix(in srgb, var(--cab-mid) 45%, #8fb0e8);
  background: color-mix(in srgb, var(--cab-mid) 10%, rgba(255, 255, 255, 0.72));
  box-shadow:
    inset 0 2px 4px rgba(41, 37, 32, 0.04),
    0 0 0 1px color-mix(in srgb, var(--cab-mid) 16%, transparent);
}

.drawer-row.lens-path {
  border-color: color-mix(in srgb, var(--cab-mid) 35%, #d6d0c8);
  background: color-mix(in srgb, var(--cab-mid) 7%, rgba(255, 255, 255, 0.78));
  box-shadow:
    inset 0 2px 4px rgba(41, 37, 32, 0.03),
    0 0 0 1px color-mix(in srgb, var(--cab-mid) 12%, transparent);
}

.drawer-row.active .drawer-label-btn {
  color: color-mix(in srgb, var(--cab-mid) 55%, #1e4a8f);
  font-weight: 700;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cab-mid) 16%, #e8f0ff) 0%,
    color-mix(in srgb, var(--cab-mid) 3%, transparent) 100%
  );
  box-shadow: inset 3px 0 0 var(--cab-mid);
}

.drawer-row.lens-path .drawer-label-btn {
  color: color-mix(in srgb, var(--cab-mid) 65%, #1d4ed8);
  font-weight: 700;
  background: color-mix(in srgb, var(--cab-mid) 12%, #eef4ff);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cab-mid) 70%, #93c5fd);
}

.drawer-row.active .drawer-row-meta,
.drawer-row.lens-path .drawer-row-meta {
  color: color-mix(in srgb, var(--cab-mid) 45%, #78716c);
}

#archiveTree:has(.drawer-note-card.active) .drawer-cabinet:not(.active):not(.lens-path) .drawer-cabinet-title,
#archiveTree:has(.drawer-note-card.active) .drawer-row:not(.active):not(.lens-path) .drawer-label-btn,
#groupTree:has(.drawer-note-card.active) .drawer-cabinet:not(.active):not(.lens-path) .drawer-cabinet-title,
#groupTree:has(.drawer-note-card.active) .drawer-row:not(.active):not(.lens-path) .drawer-label-btn,
#researchTree:has(.drawer-note-card.active) .drawer-cabinet:not(.active):not(.lens-path) .drawer-cabinet-title,
#researchTree:has(.drawer-note-card.active) .drawer-row:not(.active):not(.lens-path) .drawer-label-btn {
  color: #a8a29e;
  font-weight: 600;
}

.drawer-handle {
  width: 14px;
  flex-shrink: 0;
  border-radius: 4px 0 0 4px;
  background: repeating-linear-gradient(
    90deg,
    #a8a29e 0px,
    #a8a29e 2px,
    transparent 2px,
    transparent 5px
  );
  opacity: 0.55;
  min-height: 44px;
  align-self: stretch;
}

.drawer-row-main {
  flex: 1;
  min-width: 0;
  padding: 6px 8px 6px 4px;
}

.drawer-row-top {
  display: flex;
  align-items: center;
  gap: 4px;
}

.drawer-caret-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #57534e;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

.drawer-caret-btn:hover {
  background: rgba(42, 77, 143, 0.08);
  color: #1c1917;
}

.drawer-label-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 3px 4px;
  color: #1c1917;
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  border-radius: 4px;
}

.drawer-label-btn:hover {
  color: var(--accent);
  background: rgba(42, 77, 143, 0.06);
}

.drawer-row-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #78716c;
}

.drawer-panel {
  flex: 1 1 100%;
  width: 100%;
  padding: 0 8px 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--cab-child) 50%, transparent);
}

.drawer-note-card {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--cab-child) 28%, #e7e2dc);
  border-left: 3px solid color-mix(in srgb, var(--cab-parent) 75%, var(--cab-child));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cab-child) 12%, #fffefb);
  cursor: pointer;
  text-align: left;
  padding: 5px 8px;
  font-size: 12px;
  color: #44403c;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.drawer-note-card:hover {
  background: color-mix(in srgb, var(--cab-child) 16%, var(--bb-tree-hover-bg, #f0f7ff));
  border-color: color-mix(in srgb, var(--cab-parent) 35%, #c8d7f0);
  border-left-color: var(--cab-parent);
  box-shadow: var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--cab-parent) 20%, transparent));
}

.drawer-note-card.active {
  border-color: color-mix(in srgb, var(--cab-parent) 42%, #8fb0e8);
  border-left-color: var(--cab-parent);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--cab-parent) 12%, #e8f0ff);
  font-weight: 700;
}

.tree-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.tree-rename-input {
  font: inherit;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.92);
  min-width: 160px;
  max-width: 100%;
}

.tree-rename-input:focus {
  outline: none;
  border-color: rgba(42, 77, 143, 0.55);
  box-shadow: 0 0 0 3px rgba(42, 77, 143, 0.14);
}

.tree-caret {
  display: inline-block;
  width: 14px;
  cursor: pointer;
  color: #666;
  user-select: none;
}

.tree-caret:hover {
  color: var(--accent);
}

.tree-level-archive {
  font-weight: bold;
  color: var(--accent);
}

.tree-level-category {
  padding-left: 12px;
}

.tree-level-note {
  padding-left: 24px;
}

/* Search results — panel sits above archive tree (see cockpit.html order) */

.search-results {
  flex: 0 0 auto;
  display: none;
  margin: 0 0 8px 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #2a4d8f) 38%, var(--border, #d2d2d2));
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent, #2a4d8f) 12%, transparent) inset,
    0 6px 18px rgba(15, 23, 42, 0.1);
  max-height: min(42vh, 280px);
  overflow: hidden;
  font-size: 13px;
}

.search-results.search-results--open {
  display: flex;
  flex-direction: column;
  animation: search-results-reveal 0.35s ease;
}

@keyframes search-results-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 4px 5px 10px;
  border-bottom: 1px solid var(--border, #d2d2d2);
  background: var(--surface-muted, #f4f6f9);
  color: var(--text, #1f2937);
  flex-shrink: 0;
}

.search-results__head-text {
  min-width: 0;
}

.search-results h4 {
  margin: 0 0 1px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text, #1f2937);
}

.search-results__query {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  word-break: break-word;
}

.search-results__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.search-results__close-icon {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  margin-top: -1px;
}

.search-results__close:hover {
  background: color-mix(in srgb, var(--accent, #2a4d8f) 10%, var(--surface-muted, #f4f6f9));
  color: var(--text, #1f2937);
}

.search-results__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2a4d8f) 45%, transparent);
  color: var(--text, #1f2937);
}

.search-results__list {
  overflow-y: auto;
  padding: 6px 8px 8px;
  min-height: 0;
}

.search-results__empty {
  margin: 0;
  padding: 10px 8px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

.search-results a {
  display: block;
  text-decoration: none;
  color: var(--text, #1f2937);
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1.35;
}

.search-results a:hover {
  background: color-mix(in srgb, var(--accent, #2a4d8f) 10%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--accent, #2a4d8f) 22%, var(--border, #d2d2d2));
  text-decoration: none;
}

.search-results a:focus-visible {
  outline: 2px solid var(--accent, #2a4d8f);
  outline-offset: 1px;
}

#archiveRoot .archive-tree.archive-tree--search-dimmed {
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(0.85);
}

/* Main area */

.archive-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.archive-narrative {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #64748b;
  max-width: 560px;
}

.archive-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.35;
}

.breadcrumb__empty {
  color: inherit;
  font-style: italic;
  opacity: 0.85;
}

.breadcrumb__sep {
  flex: 0 0 auto;
  color: #94a3b8;
  user-select: none;
}

.breadcrumb__current {
  min-width: 0;
  font-weight: 650;
  color: var(--text, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb__crumb {
  appearance: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 14rem;
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--accent, #2a4d8f);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent, #2a4d8f) 35%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    text-decoration-color 0.12s ease;
}

.breadcrumb__crumb:hover,
.breadcrumb__crumb:focus-visible {
  background: var(--bb-tree-hover-bg, color-mix(in srgb, var(--accent, #2a4d8f) 12%, transparent));
  box-shadow: var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--accent, #2a4d8f) 22%, transparent));
  text-decoration-color: currentColor;
  outline: none;
}

.breadcrumb__crumb:focus-visible {
  box-shadow:
    var(--bb-tree-hover-edge, inset 0 0 0 1px color-mix(in srgb, var(--accent, #2a4d8f) 22%, transparent)),
    var(--bb-tree-focus-ring, 0 0 0 2px color-mix(in srgb, var(--accent, #2a4d8f) 35%, transparent));
}

.main-actions {
  display: flex;
  gap: 6px;
}

.pill-btn {
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}

.pill-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.pill-btn:hover:not(:disabled) {
  background: #f0f0f0;
}

.share-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.share-add-row input[type="text"],
.share-add-row select {
  min-width: 220px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.95);
}

.share-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
}

.share-message {
  min-height: 18px;
  margin-top: 8px;
  font-size: 13px;
  color: #475569;
}

.share-public-message {
  min-height: 20px;
  margin-top: 8px;
}

.share-public-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.share-public-section-title .share-public-badge {
  font-size: 10px;
}

.share-row-name .share-public-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.share-public-primary-row {
  margin-bottom: 8px;
}

.share-public-dependent-row {
  margin-top: 10px;
}

.share-forum-nested {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.45);
}

.share-forum-nested-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px 0;
}

.share-forum-nested-hint {
  margin-top: 0;
}

.share-forum-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.share-forum-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}

.share-forum-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.share-forum-field select {
  min-width: 220px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border, #cfd4dc);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.95));
  color: var(--text, #0f172a);
}

.share-forum-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.share-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 8px 10px;
}

.share-row-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-row-name {
  font-weight: 700;
  color: #1f2937;
}

.share-row-email {
  font-size: 12px;
  color: #64748b;
}

.share-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.share-row--public-summary {
  border-left: 3px solid rgba(0, 120, 212, 0.45);
}

.share-row--group-summary {
  border-left: 3px solid rgba(120, 80, 200, 0.45);
}

/* Share manager: max height + scroll body */
.share-manager-modal-card {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.share-manager-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.dialog-section--share-groups-compact {
  padding-top: 8px;
  padding-bottom: 8px;
}

.share-with-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.share-with-groups-head .dialog-section-title {
  margin: 0;
}

.share-scope-hint--tight {
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 1.4;
}

.share-scope-hint--tight kbd {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.95);
}

.share-group-select-mount {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 2px;
}

.share-group-select-label {
  flex: 0 0 auto;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.share-group-multiselect {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #cfd4dc;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.95);
}

.share-group-select-empty {
  margin: 0;
  flex: 1;
}

.share-group-apply-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.share-group-inline-msg {
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.35;
  flex: 1 1 120px;
  min-width: 0;
}

.pill-btn--compact {
  padding: 3px 12px;
  font-size: 12px;
}

/* Teams / Group Manager — Cockpit full-canvas mode */
#groupManagerRoot.mode-root:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#groupManagerRoot .group-manager-shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

#groupManagerRoot .group-manager-header {
  flex-shrink: 0;
  margin-bottom: 10px;
}

#groupManagerRoot .group-manager-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--accent, #264796);
}

#groupManagerRoot .group-manager-shell,
#groupManagerRoot .share-groups-modal-card {
  color: var(--text, inherit);
  background: transparent;
}

#groupManagerRoot .group-manager-lead {
  margin: 0;
  max-width: 52rem;
}

#groupManagerRoot .share-groups-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.share-groups-modal-card {
  max-width: min(920px, 96vw);
  max-height: min(92vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 20px;
  box-sizing: border-box;
}

#groupManagerRoot .share-groups-modal-card {
  max-width: none;
  max-height: none;
  height: 100%;
  width: 100%;
  padding: 12px 16px 16px;
}

.share-groups-modal-card > .share-scope-hint {
  flex-shrink: 0;
}

.share-groups-modal-card > .share-groups-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#groupManagerRoot .share-groups-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  align-content: stretch;
  transition: grid-template-columns 0.22s ease;
}

#groupManagerRoot .share-groups-layout.share-groups-layout--profile-open {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(280px, 360px);
}

@media (max-width: 960px) {
  #groupManagerRoot .share-groups-layout.share-groups-layout--profile-open {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(220px, 40vh);
  }
}

.share-groups-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 16px;
  align-items: start;
  align-content: start;
}

.share-groups-detail-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#groupManagerRoot .share-groups-detail-panel {
  overflow: hidden;
}

.share-groups-list-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
}

#groupManagerRoot .share-groups-list-panel {
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-muted, rgba(248, 250, 252, 0.55));
  color: var(--text, inherit);
}

.share-groups-sidebar-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent, #1e293b);
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

#groupManagerRoot .share-groups-list-empty {
  margin: 0 0 10px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted, #64748b);
  border: 1px dashed var(--border, rgba(15, 23, 42, 0.15));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

@media (max-width: 720px) {
  #groupManagerRoot .share-groups-layout,
  .share-groups-layout {
    grid-template-columns: 1fr;
  }

  #groupManagerRoot .share-groups-list-panel {
    max-height: min(40vh, 280px);
  }
}

.share-groups-list {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}

#groupManagerRoot .share-groups-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-bottom: 12px;
}

.share-groups-list-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  background: var(--surface, rgba(255, 255, 255, 0.85));
  color: var(--text, inherit);
  cursor: pointer;
  font-size: 13px;
}

.share-groups-list-item.is-active {
  border-color: color-mix(in srgb, var(--accent, #0078d4) 55%, var(--border, #ccc));
  background: color-mix(in srgb, var(--accent, #0078d4) 12%, var(--surface, #fff));
  color: var(--text, inherit);
}

.share-group-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.share-group-name-label {
  flex: 0 0 auto;
  min-width: 7rem;
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #334155);
}

.share-group-name-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.share-group-name-controls input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border, #cfd4dc);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface, #fff);
  color: var(--text, inherit);
}

.share-group-name-actions {
  margin-bottom: 14px;
}

.pill-btn--muted {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.95);
  color: #64748b;
}

.pill-btn--danger {
  border-color: rgba(185, 28, 28, 0.35);
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.9);
}

.pill-btn--danger:hover:not(:disabled) {
  background: rgba(254, 226, 226, 0.95);
}

.share-groups-members-frame {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-muted, rgba(248, 250, 252, 0.65));
  color: var(--text, inherit);
  transition: opacity 0.15s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#groupManagerRoot .share-groups-members-frame {
  flex: 1 1 auto;
  overflow: hidden;
}

.share-groups-members-frame.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.share-groups-members-heading {
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #1e293b);
  margin: 0 0 6px 0;
  flex-shrink: 0;
}

.share-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  font-size: 12px;
  color: var(--text-muted, #475569);
  flex-shrink: 0;
}

.share-group-meta__item {
  white-space: nowrap;
}

.share-group-meta__item strong {
  font-weight: 700;
  color: var(--text, #1e293b);
}

.share-groups-detail-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
  text-align: center;
  border: 1px dashed var(--border, rgba(15, 23, 42, 0.14));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

.share-groups-public-hint {
  margin: 0 0 12px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
}

.share-group-member-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.share-group-member-form-row input[type="email"],
.share-group-member-form-row input[type="text"],
.share-group-member-form-row #shareGroupEmailInput {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border, #cfd4dc);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface, #fff);
  color: var(--text, inherit);
}

.share-group-member-perms {
  flex: 0 1 auto;
  white-space: nowrap;
}

.share-group-allow-comment-label {
  font-size: 13px;
}

.share-group-member-form-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.share-group-add-another-link {
  display: block;
  width: fit-content;
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--accent, #0078d4);
  cursor: pointer;
  text-decoration: underline;
}

.share-group-add-another-link:hover {
  color: color-mix(in srgb, var(--accent, #0078d4) 75%, #000);
}

.share-group-members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Show at most ~2 member rows; scroll for the rest */
  max-height: calc(2 * 3rem + 6px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#groupManagerRoot .share-group-members-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.share-group-members-empty {
  margin: 0;
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  text-align: center;
}

.share-group-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  background: var(--surface, rgba(255, 255, 255, 0.9));
  color: var(--text, inherit);
  cursor: pointer;
  font-size: 13px;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.share-group-member-row:hover {
  border-color: color-mix(in srgb, var(--accent, #0078d4) 40%, var(--border, #ccc));
}

.share-group-member-row.is-selected {
  border-color: color-mix(in srgb, var(--accent, #0078d4) 55%, var(--border, #ccc));
  background: color-mix(in srgb, var(--accent, #0078d4) 12%, var(--surface, #fff));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0078d4) 20%, transparent);
}

.share-group-member-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-group-member-primary {
  font-weight: 650;
  color: var(--text, #1e293b);
  word-break: break-word;
}

.share-group-member-secondary {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  word-break: break-all;
}

.share-group-member-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.share-group-member-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.share-group-member-added {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.share-row-actions--muted {
  opacity: 0.9;
}

.share-public-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0078d4;
}

.share-scope-hint {
  margin: 0 0 10px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.detail-comments-heading {
  margin: 10px 0 8px 0;
  font-size: 14px;
  color: var(--accent);
}

.detail-sharing-block {
  margin: 0 0 8px 0;
}

.detail-sharing-title {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.detail-sharing-via {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.detail-deploy-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.detail-deploy-title {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.detail-deploy-hint {
  margin: 0 0 8px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
}

.detail-deploy-muted {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.detail-deploy-pdf-btn {
  margin-right: 8px;
}

.detail-stash-open-btn {
  margin-top: 4px;
}

/* Stash chooser — above full viewer; uses standard dialog-card / dialog-section */
#stashChooserModal.modal {
  z-index: 100001;
}

.stash-chooser-card {
  max-width: min(520px, calc(100vw - 36px));
}

.stash-chooser-section {
  padding-top: 8px;
  padding-bottom: 10px;
}

.stash-chooser-section .stash-chooser-option + .stash-chooser-option {
  margin-top: 10px;
}

.stash-chooser-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.stash-chooser-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.stash-chooser-option--browse {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, #e2e8f0);
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, #fff);
}

.stash-chooser-option--browse:hover:not(:disabled) {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, #fff);
}

.stash-chooser-option--stash {
  border-color: #f59e0b;
  background: #fffbeb;
}

.stash-chooser-option--stash:hover:not(:disabled) {
  border-color: #d97706;
  background: #fef3c7;
}

.stash-chooser-option__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.stash-chooser-option__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
}

.stash-chooser-option__hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #2563eb);
}

.stash-chooser-option__hint--warn {
  color: #b45309;
}

.stash-chooser-alert {
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 2px solid #dc2626;
  background: #fef2f2;
  font-size: 13px;
  line-height: 1.5;
  color: #7f1d1d;
}

.stash-chooser-alert strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #991b1b;
}

.stash-chooser-alert p {
  margin: 0;
}

.stash-chooser-confirm-target {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.stash-chooser-confirm-btn {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

.stash-chooser-confirm-btn:hover {
  background: #92400e;
  border-color: #92400e;
}

/* Full-canvas stash viewer — uses viewport below site chrome (same idea as DM modal) */
#stashBoxModal.stash-box-modal--full-canvas.modal {
  align-items: stretch;
  justify-content: stretch;
  padding: var(--bb-chrome-top, 152px) 10px 10px;
  overflow: hidden;
}

#stashBoxModal.stash-box-modal--full-canvas > .stash-box-modal-card {
  width: 100%;
  max-width: 100%;
  height: calc(100vh - var(--bb-chrome-top, 152px) - 20px);
  max-height: none;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}

#stashBoxModal.stash-box-modal--full-canvas > .modal-content {
  max-height: none;
  overflow: hidden;
}

.stash-box-modal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stash-box-modal-card .dialog-header {
  flex-shrink: 0;
}

.stash-box-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 -18px -18px -18px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.stash-box-error {
  color: #b91c1c;
}

.stash-box-loading,
.stash-box-empty-hint,
.stash-box-collection-hint {
  padding: 16px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  line-height: 1.5;
}

.stash-box-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}

.stash-box-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.stash-box-tab {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.stash-box-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.stash-box-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-stash-delete-btn {
  margin-top: 4px;
}

.detail-stash-delete-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.stash-box-count {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.stash-box-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(260px, 320px);
  width: 100%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.stash-box-sidebar {
  min-height: 0;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  border-right: 1px solid var(--border, #e2e8f0);
  padding: 0;
  box-sizing: border-box;
  background: var(--surface-muted, #fafafa);
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.stash-box-sidebar .sidebar-header {
  padding: 10px 14px 8px 16px;
  flex-shrink: 0;
}

.stash-box-sidebar .archive-tree {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: auto;
  padding: 6px 12px 14px 16px;
  box-sizing: border-box;
  margin: 0;
  list-style: none;
}

.stash-box-sidebar .archive-tree > li {
  margin: 0;
  padding: 0;
}

.stash-box-sidebar .archive-tree .tree-node {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 8px 5px 4px;
  margin: 2px 0;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.35;
}

.stash-box-sidebar .archive-tree .tree-node:hover {
  background: #e9f1ff;
}

.stash-box-sidebar .archive-tree .tree-node.active {
  background: #d4e3ff;
  font-weight: 600;
}

.stash-box-sidebar .archive-tree .tree-label {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.stash-box-sidebar .archive-tree .tree-caret,
.stash-box-sidebar .archive-tree .tree-caret-spacer {
  flex-shrink: 0;
  margin-top: 1px;
}

.stash-box-sidebar .archive-tree .tree-caret-spacer {
  display: inline-block;
  width: 14px;
}

.stash-box-sidebar .archive-tree .tree-children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

.stash-box-editor-wrap {
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--border, #e2e8f0);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface, #fff);
}

#stashBoxModal .note-editor-container.stash-box-editor-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  align-self: stretch;
}

.stash-box-editor {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#stashBoxModal .stash-box-editor img,
#stashBoxModal .stash-box-photo-preview {
  display: block;
  max-width: 100%;
  max-height: min(calc(100vh - var(--bb-chrome-top, 152px) - 220px), 720px);
  width: auto;
  height: auto;
  margin: 12px auto 0;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
}

#stashBoxModal .stash-box-editor-toolbar {
  flex-shrink: 0;
}

#stashBoxModal .stash-box-editor-toolbar .note-title-input {
  width: 100%;
  font-size: 1.05rem;
}

#stashBoxModal .detail-panel.stash-box-detail {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
  max-width: none;
  flex: initial;
  background: var(--surface, #fff);
  padding: 10px 12px;
}

.stash-tree-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  list-style: none;
}

body.stash-box-open {
  overflow: hidden;
}

.detail-deploy-status {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.note-comments-container {
  max-height: min(42vh, 520px);
  overflow-y: auto;
  margin-bottom: 10px;
}

.note-comments-empty {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.note-comment {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.95);
}

.note-comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.note-comment-author {
  font-weight: 700;
  color: #1f2937;
}

.note-comment-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
}

.note-comment-actions {
  margin-top: 6px;
}

.note-comment-delete {
  font-size: 12px;
  padding: 2px 8px;
}

.note-comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.note-comment-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cfd4dc;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}

/* Main content layout */

.main-content {
  flex: 1;
  display: flex;
  gap: 8px;
  min-height: 0;
}

/* Editor */

.note-editor-container {
  flex: 2 1 0;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
}

/* Maximize read pane — full overlay between chrome (matches forums reader / dash timeline) */
.bb-note-pane-maximize-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100040;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.35);
  cursor: pointer;
}

.bb-note-pane-maximize-backdrop[hidden] {
  display: none !important;
}

body.bb-note-pane-maximized .note-editor-container--maximized {
  position: fixed !important;
  top: var(--bb-note-pane-inset-top, var(--bb-chrome-top, 0px));
  left: 0;
  right: 0;
  bottom: var(--bb-note-pane-inset-bottom, 0px);
  width: 100% !important;
  max-width: none !important;
  height: calc(
    100vh - var(--bb-note-pane-inset-top, var(--bb-chrome-top, 0px)) -
      var(--bb-note-pane-inset-bottom, 0px)
  ) !important;
  max-height: none !important;
  z-index: 100050;
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin: 0;
  flex: none !important;
  box-shadow: 0 -6px 28px rgba(15, 23, 42, 0.12);
}

body.bb-note-pane-maximized .note-editor-container--maximized .note-toolbar-editor-actions [data-note-pane-maximize] {
  font-weight: 700;
}

.note-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Save / Edit — always on the note canvas toolbar (not the tree sidebar) */
.note-toolbar-editor-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
  align-items: center;
}

.note-toolbar-editor-actions .pill-btn {
  min-width: 4.5rem;
}

#noteTitle {
  flex: 1;
}

/* Group / Research / Archive: title reads as a label/heading, not an inset field */
.note-editor-title {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 100%;
  margin: 0;
  padding: 0 4px 4px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--text, #1f2a44);
}

.note-editor-title::placeholder {
  color: var(--text-muted, #94a3b8);
  opacity: 1;
  font-weight: 600;
}

.note-editor-title:disabled {
  opacity: 1;
  cursor: default;
  -webkit-text-fill-color: var(--text, #1f2a44);
  color: var(--text, #1f2a44);
}

.note-editor-title:not(:disabled):focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: color-mix(in srgb, var(--accent, #2a4d8f) 50%, transparent);
}

/* Formatting toolbar */

.format-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.fmt-btn {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}

.fmt-btn:hover {
  background: #eee;
}

.fmt-select {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 2px 4px;
  font-size: 12px;
}

.fmt-color {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 0;
  cursor: pointer;
}

.fmt-sep {
  width: 1px;
  height: 18px;
  background: #ccc;
  margin: 0 2px;
}

.note-search-inline {
  display: flex;
  gap: 4px;
  align-items: center;
}

#noteSearch {
  width: 140px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

#noteBodyWrapper,
#groupThreadBodyWrapper,
#researchNoteBodyWrapper {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#groupRoot #groupThreadCommentsWrap {
  flex-shrink: 0;
}

/* Archive / group / research: scroll inside the note body (same pattern as journal) */
#archiveRoot #noteBody,
#groupRoot #groupThreadBody,
#researchRoot #researchNoteBody {
  flex: 1 1 auto;
  min-height: 5rem;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.note-editor table {
  border-collapse: collapse;
  margin: 0.5em 0;
  max-width: 100%;
}

.note-editor table td,
.note-editor table th {
  border: 1px solid var(--border-color, #cbd5e1);
  padding: 4px 8px;
  vertical-align: top;
  min-width: 2em;
}

.note-editor {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 6px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

.note-editor:empty:before {
  content: attr(data-placeholder);
  color: #999;
}

/* Note links (Notion-like pill style) */

.note-link {
  background: #eef3ff;
  padding: 1px 6px;
  border-radius: 4px;
  color: #264796;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.note-link:hover {
  background: #d9e4ff;
}

/* Detail panel */

.detail-panel {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  background: #fff;
  min-width: 220px;
  max-width: 260px;
  font-size: 13px;
  overflow-y: auto;
  max-height: 100%;
}

.detail-panel h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: var(--accent);
}

.detail-panel p {
  margin: 4px 0;
}

.detail-label {
  font-weight: bold;
}

/* In-note highlight (search) */

.note-search-highlight {
  background: #ffeb3b;
}

#noteBodyWrapper.note-search-reveal,
#noteBody.note-search-reveal {
  box-shadow:
    inset 0 0 0 2px var(--accent, #2563eb),
    inset 0 0 14px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
  transition: box-shadow 0.25s ease;
}

/* Rich text inside notes (toolbar HTML or markdown paste) */
.note-editor h1 {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0.85em 0 0.4em;
  line-height: 1.25;
  color: var(--text, #1f2a44);
}

.note-editor h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.75em 0 0.35em;
  line-height: 1.3;
  color: var(--text, #1f2a44);
}

.note-editor h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.65em 0 0.3em;
  line-height: 1.35;
  color: var(--text, #334155);
}

.note-editor p {
  margin: 0.4em 0;
  line-height: 1.55;
}

.note-editor ul,
.note-editor ol {
  margin: 0.45em 0 0.65em;
  padding-left: 1.45em;
}

.note-editor ul {
  list-style: disc;
}

.note-editor ol {
  list-style: decimal;
}

.note-editor li {
  margin: 0.2em 0;
  line-height: 1.5;
}

.note-editor hr {
  border: 0;
  border-top: 1px solid var(--border-color, #cbd5e1);
  margin: 0.85em 0;
}

.note-editor code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, #f1f5f9);
}

.note-editor strong {
  font-weight: 700;
}

/* Persona icon next to tree nodes */
.persona-icon {
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.persona-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Persona picker popup (aligned with dialog-card / modal chrome) */
.persona-picker {
  position: fixed;
  z-index: 100000;
  width: min(300px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  font-size: 14px;
  color: var(--text, #0f172a);
}

.persona-picker__shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  padding: 18px;
  box-sizing: border-box;
}

.persona-picker .dialog-header {
  flex-shrink: 0;
}

.persona-picker__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.persona-picker__heading h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.persona-picker__subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14em;
}

.persona-picker__section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.persona-picker__hint {
  margin: 0 0 8px;
  flex-shrink: 0;
}

.persona-picker__list {
  overflow-y: auto;
  min-height: 0;
  max-height: min(240px, 42vh);
  margin: 0 -2px;
  padding: 0 2px;
}

.persona-picker__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.persona-picker__row:last-child {
  margin-bottom: 0;
}

.persona-picker__row:hover {
  background: color-mix(in srgb, var(--accent, #2a4d8f) 9%, transparent);
}

.persona-picker__row--readonly {
  opacity: 0.72;
  cursor: default;
}

.persona-picker__row--readonly:hover {
  background: transparent;
}

.persona-picker__row input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.persona-picker__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

.persona-picker__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-picker__actions {
  flex-shrink: 0;
  margin-top: 10px;
  padding-top: 0;
}

#personaFilter {
  margin-left: 12px;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #bbb;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#personaFilter:hover {
  border-color: #888;
}

#personaFilter:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 3px rgba(74,144,226,0.6);
}

.persona-badge {
  display: inline-block;
  background: #e0e0e0;
  color: #333;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 10px;
  font-size: 11px;
  opacity: 0.8;
}

/* Dragging */
.dragging {
  opacity: 0.7;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Thick glowing insertion bar */
.drop-before {
  border-top: 4px solid #4da3ff;
  box-shadow: 0 -2px 6px rgba(77,163,255,0.6);
}

/* Thick glowing insertion bar (after) */
.drop-after {
  border-bottom: 4px solid #4da3ff;
  box-shadow: 0 2px 6px rgba(77,163,255,0.6);
}

/* Drop-into highlight — same geometry language as tree hover */
.drop-into {
  background: var(--bb-tree-active-hover-bg, rgba(77, 163, 255, 0.18));
  border-radius: 6px;
  box-shadow: var(--bb-tree-active-hover-edge, inset 0 0 0 1px rgba(77, 163, 255, 0.45));
}

.drop-into > .tree-header {
  background: transparent;
  box-shadow: none;
}

/* Invalid drop target feedback */
.drop-invalid {
  background: rgba(220, 53, 69, 0.10);
  outline: 2px solid rgba(220, 53, 69, 0.55);
  border-radius: 4px;
}

/* YouTube / Vimeo / TikTok embeds in note bodies (archive, group, research) */
#noteBody .pf-video-embed,
#groupThreadBody .pf-video-embed,
#researchNoteBody .pf-video-embed,
.pf-video-embed {
  margin: 14px 0;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.3));
  background: #000;
}

.pf-video-embed--youtube,
.pf-video-embed--vimeo {
  aspect-ratio: 16 / 9;
}

.pf-video-embed--tiktok {
  max-width: 325px;
  margin-left: auto;
  margin-right: auto;
}

.pf-video-embed__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 0;
}

.pf-video-embed--youtube .pf-video-embed__frame,
.pf-video-embed--vimeo .pf-video-embed__frame {
  min-height: 0;
}

.pf-video-embed__frame--tiktok {
  min-height: 580px;
}

/* ----- Teams unified mode (overview + workspace + members) ----- */
#groupManagerRoot .teams-unified-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

#groupManagerRoot .teams-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 12px 16px 16px;
}

#groupManagerRoot .teams-main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 10px;
}

#groupManagerRoot .teams-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

#groupManagerRoot .teams-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(128, 128, 128, 0.32));
  background: color-mix(in srgb, var(--surface-muted, #f3f4f6) 65%, var(--surface, #fff));
}

#groupManagerRoot .teams-switch-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
  user-select: none;
}

#groupManagerRoot .teams-switch-select {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, #264796);
  border: none;
  background: transparent;
  padding: 2px 4px 2px 0;
  min-width: 7rem;
  max-width: min(16rem, 38vw);
  cursor: pointer;
}

#groupManagerRoot .teams-switch-select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #264796) 45%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

#groupManagerRoot .teams-switch-manage {
  margin-left: 2px;
}

#groupManagerRoot .teams-members-team-row {
  margin-bottom: 8px;
}

#groupManagerRoot .teams-members-team-actions {
  margin-bottom: 14px;
}

#groupManagerRoot .teams-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

#groupManagerRoot .teams-tab {
  border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

#groupManagerRoot .teams-tab.is-active {
  border-color: color-mix(in srgb, var(--accent, #264796) 55%, var(--border));
  background: color-mix(in srgb, var(--accent, #264796) 12%, var(--surface, #fff));
  color: var(--accent, #264796);
}

#groupManagerRoot .teams-tab.is-disabled,
#groupManagerRoot .teams-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#groupManagerRoot .teams-empty-state {
  margin: 0;
  padding: 24px 8px;
  color: var(--text-muted, #64748b);
  font-size: 0.95rem;
}

#groupManagerRoot .teams-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#groupManagerRoot .teams-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#groupManagerRoot .teams-panel.hidden {
  display: none;
}

#groupManagerRoot .teams-overview-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 12px;
}

#groupManagerRoot .teams-date-long {
  font-weight: 600;
  min-width: 10rem;
}

#groupManagerRoot .teams-date-input {
  font: inherit;
}

#groupManagerRoot .teams-workspace-root {
  height: 100%;
  min-height: 420px;
}

#groupManagerRoot .teams-workspace-root .archive-app {
  height: 100%;
  min-height: 420px;
}

#groupManagerRoot .teams-panel[data-teams-panel="members"] {
  max-width: 720px;
}

@media (max-width: 960px) {
  #groupManagerRoot .teams-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  #groupManagerRoot .teams-switch-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  #groupManagerRoot .teams-switch-select {
    max-width: none;
    flex: 1 1 auto;
  }

  .dash-team-grid {
    grid-template-columns: 1fr;
  }
}