/* =========================================================================
   views/notes-editor.css — Note editor extras — slash menu, checklist blocks, selection toolbar + AI menu
   Split from the old monolithic styles/views.css. LOAD ORDER MATTERS:
   the <link> order in Magnet CRM.html / Client App.html reproduces the
   original file order, so the cascade is unchanged — add new rules to the
   matching feature file, not the end of the list.
   ========================================================================= */
/* ---------------------------------------------------------------------- */
/* Slash command menu                                                     */
/* ---------------------------------------------------------------------- */
.slash-menu {
  position: fixed; z-index: calc(var(--z-popover) + 5);
  width: 300px; max-height: 320px; display: flex; flex-direction: column;
  overflow: hidden;
}
.slash-hint { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-soft); }
.slash-hint kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid var(--border); border-radius: 4px; background: var(--gray-50); font-family: var(--font-sans); font-size: 11px; line-height: 1; color: var(--text-muted); }
.slash-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.slash-opt { display: flex; align-items: center; gap: var(--space-3); padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background var(--dur-fast) var(--ease); }
.slash-opt.active { background: var(--gray-100); }
@media (hover: hover) and (pointer: fine) {
  .slash-opt:hover { background: var(--gray-100); }
}
.slash-ico { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--fw-bold); }
.slash-ico svg { width: 17px; height: 17px; }
.slash-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slash-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.slash-desc { font-size: var(--text-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash-empty { padding: 14px 10px; text-align: center; font-size: var(--text-sm); color: var(--text-soft); }

/* ---------------------------------------------------------------------- */
/* Checklist + divider blocks                                             */
/* ---------------------------------------------------------------------- */
.ne-editor .ne-todo { list-style: none; padding-left: 0; margin: 0 0 0.6em; }
.ne-todo-item, .ne-editor .ne-todo-item { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 0.25em; }
.ne-check { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; border: 1.6px solid var(--gray-300); border-radius: var(--radius-xs); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); user-select: none; }
.ne-check::after { content: ""; width: 10px; height: 10px; background: no-repeat center/contain; opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.ne-todo-item.checked .ne-check { background: var(--primary-600); border-color: var(--primary-600); }
.ne-todo-item.checked .ne-check::after { opacity: 1; transform: scale(1); }
.ne-todo-text { flex: 1; min-width: 0; outline: 0; }
.ne-todo-item.checked .ne-todo-text { color: var(--text-soft); text-decoration: line-through; }
.ne-editor .ne-hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }

/* ---------------------------------------------------------------------- */
/* Floating selection format toolbar + AI menu                            */
/* ---------------------------------------------------------------------- */
.ne-fmt {
  position: fixed; z-index: calc(var(--z-popover) + 6);
  display: flex; align-items: center; gap: 2px; padding: 4px;
}
.ne-fmt-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ne-fmt-btn b, .ne-fmt-btn i { font-size: 15px; }
.ne-fmt-style { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 9px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.ne-fmt-style svg { width: 14px; height: 14px; color: var(--text-soft); }
.ne-fmt-style.active { background: var(--gray-100); }
@media (hover: hover) and (pointer: fine) {
  .ne-fmt-style:hover { background: var(--gray-100); }
}
.ne-fmt-style-label { white-space: nowrap; }
.ne-fmt-btn svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .ne-fmt-btn:hover { background: var(--gray-100); }
}
.ne-fmt-btn.active { background: var(--primary-50); color: var(--primary-700); }
.ne-fmt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.ne-fmt-ai { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border-radius: var(--radius-sm); color: var(--primary-700); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.ne-fmt-ai svg { width: 15px; height: 15px; }
.ne-fmt-ai.active { background: var(--primary-50); }
@media (hover: hover) and (pointer: fine) {
  .ne-fmt-ai:hover { background: var(--primary-50); }
}

.ne-ai-menu {
  position: fixed; z-index: calc(var(--z-popover) + 7);
  width: 220px; padding: 6px;
}
.ne-ai-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.ne-ai-head svg { width: 14px; height: 14px; color: var(--primary-500); }
.ne-ai-list { display: flex; flex-direction: column; gap: 1px; }
.ne-ai-opt { display: flex; align-items: center; width: 100%; padding: 8px 9px; border-radius: var(--radius-sm); text-align: left; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ne-ai-opt:hover { background: var(--gray-100); }
}
.ne-ai-busy { display: flex; align-items: center; gap: 9px; padding: 10px 9px; font-size: var(--text-sm); color: var(--text-muted); }
.ne-ai-spin { width: 14px; height: 14px; border: 2px solid var(--primary-100); border-top-color: var(--primary-600); border-radius: 50%; animation: neSpin 0.6s linear infinite; flex-shrink: 0; }
@keyframes neSpin { to { transform: rotate(360deg); } }

.ne-style-menu {
  position: fixed; z-index: calc(var(--z-popover) + 7);
  width: 208px; padding: 6px;
}
.ne-style-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border-radius: var(--radius-sm); text-align: left; color: var(--text); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ne-style-opt:hover { background: var(--gray-100); }
}
.ne-style-opt > svg { width: 15px; height: 15px; margin-left: auto; color: var(--primary-600); flex-shrink: 0; }
.ne-style-ico { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 10px; font-weight: var(--fw-bold); border: 1px solid var(--border); border-radius: var(--radius-xs); letter-spacing: -0.02em; }
.ne-style-ico svg { width: 15px; height: 15px; }
.ne-style-name { color: var(--text-strong); font-weight: var(--fw-medium); font-size: var(--text-sm); }
.ne-style-opt.sel .ne-style-name { color: var(--primary-700); }

/* link entry mode — the format toolbar swaps to this */
.ne-fmt.ne-fmt--link { padding: 4px; min-width: 320px; }
.ne-link-back { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-soft); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ne-link-back:hover { background: var(--gray-100); color: var(--text-strong); }
}
.ne-link-back svg { width: 16px; height: 16px; }
.ne-link-input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); }
.ne-link-input:focus, .ne-link-input:focus-visible { outline: none; box-shadow: none; border: 0; }
.ne-link-input::placeholder { color: var(--text-soft); }
.ne-link-go { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-soft); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ne-link-go:hover { background: var(--gray-100); color: var(--text-strong); }
}
.ne-link-go svg { width: 16px; height: 16px; }

/* dark suggestions dropdown */
.ne-link-menu {
  position: fixed; z-index: calc(var(--z-popover) + 8);
  display: flex; flex-direction: column; padding: 6px;
  background: #1f1f27; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: popIn var(--dur) var(--ease);
  max-height: 280px; overflow-y: auto;
}
.ne-link-opt { display: block; width: 100%; padding: 9px 11px; border-radius: var(--radius-sm); text-align: left; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: #f4f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ne-link-opt:hover { background: rgba(255,255,255,0.08); }
}

@media (max-width: 560px) {
  .ne-doc { padding: var(--space-5) var(--space-5) var(--space-10); }
  .ne-title { font-size: var(--text-2xl); }
}

/* ===== Deliverables tab ===== */
.cdeliv-page { padding: var(--space-6); max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.cdeliv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.cdeliv-title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 4px; letter-spacing: -0.01em; }
.cdeliv-sub { color: var(--text-soft); font-size: var(--text-sm); margin: 0; }
.cdeliv-progress { padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cdeliv-list { display: flex; flex-direction: column; gap: var(--space-2); }
/* Task-style clickable row: pop checkbox + title + meta (subtask count / due).
   The whole card (bar the checkbox) opens the deliverable detail sheet. */
.cdeliv-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cdeliv-row:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .cdeliv-row:hover { border-color: var(--border-strong); }
}
.cdeliv-check { flex-shrink: 0; }
.cdeliv-row-title { flex: 1; min-width: 0; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdeliv-row.is-done .cdeliv-row-title { text-decoration: line-through; color: var(--text-soft); }
.cdeliv-row-untitled { color: var(--text-soft); font-weight: var(--fw-regular); }
.cdeliv-row-meta { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-3); }
.cdeliv-row-subs { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); white-space: nowrap; }
.cdeliv-row-subs svg { width: 13px; height: 13px; }
.cdeliv-empty,
.cdeliv-loading { padding: var(--space-6); text-align: center; color: var(--text-soft); font-size: var(--text-sm); border: 1px dashed var(--border); border-radius: var(--radius-lg); }

/* Deliverable detail sheet — the Subtasks section under the notes editor.
   The list itself reuses .td-checklist / .tdc-row (styled in tasks.css). */
.dd-subs { display: flex; flex-direction: column; gap: var(--space-2); }
.dd-subs-head { display: flex; align-items: center; gap: var(--space-2); }
.dd-subs-title { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.dd-subs-count { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); }