/* =========================================================================
   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 var(--space-3); 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: var(--text-2xs); line-height: 1; color: var(--text-muted); }
.slash-list { overflow-y: auto; padding: var(--space-1-5); display: flex; flex-direction: column; gap: 1px; }
.slash-opt { display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-2); 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: var(--space-3-5) var(--space-2-5); 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: var(--space-2-5); 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: var(--space-0-5); padding: var(--space-1);
}
.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: var(--text-md); 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: var(--text-base); }
.ne-fmt-style { display: inline-flex; align-items: center; gap: var(--space-1); height: 30px; padding: 0 var(--space-1-5) 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 var(--space-0-5); }
.ne-fmt-ai { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 var(--space-2-5) 0 var(--space-2); 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: var(--space-1-5);
}
.ne-ai-head { display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-2) var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.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: var(--space-2) 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: var(--space-2-5) 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: spin 0.6s linear infinite; flex-shrink: 0; }

.ne-style-menu {
  position: fixed; z-index: calc(var(--z-popover) + 7);
  width: 208px; padding: var(--space-1-5);
}
.ne-style-opt { display: flex; align-items: center; gap: var(--space-2-5); 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: var(--text-3xs); 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); }
.ne-style-opt.sel { background: color-mix(in srgb, var(--primary-500) 7%, var(--surface)); }   /* selected = slight fill (app rule) */

/* link entry mode — the format toolbar swaps to this */
.ne-fmt.ne-fmt--link { padding: var(--space-1); 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 var(--space-2); 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: var(--space-1-5);
  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 var(--space-1); letter-spacing: -0.01em; }
.cdeliv-sub { color: var(--text-soft); font-size: var(--text-sm); margin: 0; }
/* portal-style hero plate (ring + headline + bar) at the top of the tab */
.cdeliv-hero-card { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
.cdeliv-hero-main { min-width: 0; }
.cdeliv-hero-title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; margin: 0; }
.cdeliv-hero-sub { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-0-5) 0 0; }
.cdeliv-hero-bar { margin-left: auto; flex: 0 0 200px; display: flex; flex-direction: column; gap: var(--space-1-5); align-items: flex-end; }
.cdeliv-hero-bar .proj-bar { width: 100%; }
.cdeliv-hero-cap { font-size: var(--text-xs); color: var(--text-soft); }
@media (max-width: 720px) { .cdeliv-hero-bar { display: none; } }
/* no-plan empty hero — dashed, with the rail's icon-disc treatment */
.cdeliv-hero-card--empty { border-style: dashed; box-shadow: none; }
/* phones: the icon | text | button row crushes the copy into one-word
   lines — stack and centre instead */
@media (max-width: 640px) {
  .cdeliv-hero-card--empty { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); }
  .cdeliv-hero-card--empty .cdeliv-hero-applybtn { margin-left: 0; }
}
.cdeliv-hero-empty-ico { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--primary-50); color: var(--primary-600); }
.cdeliv-hero-empty-ico svg { width: 22px; height: 22px; }
.cdeliv-hero-applybtn { margin-left: auto; }
/* sections read as cards (the plan-banner .clsched carries its own surface) */
.cdeliv-card { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.cdeliv-card .cdeliv-head { margin: 0; }
/* Linked tasks = internal follow-ups (excluded from progress) — dashed, no
   shadow, so the card reads a step quieter than Deliverables */
.cdeliv-page .cltasks:not(.clsched) { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); margin-top: 0; }
.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); }
/* drag re-order: always-visible grip (no hover-reveal), primary drop line */
.cdeliv-grip { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--text-soft); cursor: grab; touch-action: none; margin-left: calc(var(--space-2) * -1); }
.cdeliv-grip svg { width: 16px; height: 16px; }
.cdeliv-grip:active { cursor: grabbing; }
.cdeliv-row.is-dragging { opacity: 0.45; }
.cdeliv-row.drop-before { box-shadow: 0 -2px 0 0 var(--primary-500); }
.cdeliv-row.drop-after { box-shadow: 0 2px 0 0 var(--primary-500); }
.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: var(--space-1); 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 { 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); color: var(--text-soft); }
.dd-subs-count { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); }