/**
 * KokonutUI-inspired interaction patterns (vanilla port).
 * Obsidian palette; motion via CSS only.
 */

/* ==========================================================================
   1. File upload / dropzone
   ========================================================================== */

.neurofy-dropzone-host {
  position: relative;
  overflow: hidden;
}

.neurofy-dropzone-host::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, rgba(99, 102, 241, 0.08), transparent 28%),
    linear-gradient(to top, rgba(99, 102, 241, 0.06), transparent 28%);
  transition: opacity 0.2s ease;
}

.neurofy-dropzone-host.dz-drag-hover::before,
.neurofy-dropzone-host.is-drag-active::before {
  opacity: 1;
}

.neurofy-dropzone-host.dz-drag-hover,
.neurofy-dropzone-host.is-drag-active {
  border-color: rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.06);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.12);
  transform: scale(0.995);
}

.neurofy-dropzone-host.is-uploading .dz-message {
  opacity: 0.35;
}

.neurofy-dropzone-host .dz-preview {
  animation: neurofyChipIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.neurofy-dropzone-host .dz-preview.dz-processing .dz-progress {
  opacity: 1;
}

.neurofy-dropzone-host .dz-preview.dz-success .dz-progress {
  opacity: 0;
}

.neurofy-dropzone-host .dz-preview.dz-success {
  border-color: rgba(47, 157, 99, 0.35);
}

.neurofy-dropzone-host .dz-preview.dz-error {
  border-color: rgba(212, 43, 69, 0.4);
}

.neurofy-dropzone-host .dz-upload-percent {
  display: block;
  margin-top: 0.25rem;
  font-size: 12px;
  font-weight: 600;
  color: rgba(240, 180, 255, 0.95);
  font-variant-numeric: tabular-nums;
}

@keyframes neurofyChipIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   2. Rich prompt-style markdown editor
   ========================================================================== */

.neurofy-editor-wrapper.neurofy-prompt-field {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  background: #090d14;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.neurofy-editor-wrapper.neurofy-prompt-field.is-focused {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
  background: #0a1018;
}

.neurofy-editor-wrapper.neurofy-prompt-field .neurofy-tiptap-editor .tiptap.ProseMirror,
.neurofy-editor-wrapper.neurofy-prompt-field .tiptap.ProseMirror {
  border: none;
  border-radius: 0;
  min-height: var(--editor-min-h, 90px);
  max-height: var(--editor-max-h, 340px);
  overflow-y: auto;
  padding: 0.75rem 0.875rem 0.5rem;
  resize: none;
}

.neurofy-editor-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(7, 9, 12, 0.55);
}

.neurofy-editor-hint {
  font-size: 12px;
  color: #5e5d58;
  letter-spacing: 0.01em;
}

.neurofy-editor-hint kbd {
  display: inline-block;
  padding: 0 4px;
  margin: 0 1px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #92918c;
  font-family: var(--font-mono);
  font-size: 12px;
}

.neurofy-editor-status {
  font-size: 12px;
  color: #f0b4ff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.neurofy-editor-wrapper.is-focused .neurofy-editor-status {
  opacity: 1;
}

/* ==========================================================================
   3. Command palette / action search
   ========================================================================== */

#command-palette-root.palette-is-open {
  display: block;
}

#command-palette-root:not(.palette-is-visible) #command-palette-backdrop {
  opacity: 0;
}

#command-palette-root.palette-is-visible #command-palette-backdrop {
  opacity: 1;
  transition: opacity 0.18s ease;
}

#command-palette-root.palette-is-visible.nf-motion-palette #command-palette-backdrop,
#command-palette-root.palette-is-visible.nf-motion-palette #command-palette-panel {
  transition: none;
}

#command-palette-panel {
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

#command-palette-root.palette-is-visible #command-palette-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.palette-row {
  border-radius: 10px;
  margin: 0 6px;
  border-left: none;
  position: relative;
}

.palette-row.selected {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.palette-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #92918c;
}

.palette-row.selected .palette-row-icon {
  color: #edece8;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.palette-row-kbd {
  font-size: 12px;
  color: #5e5d58;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.palette-row.selected .palette-row-kbd {
  opacity: 1;
}

.palette-row-action .palette-row-title {
  color: #f4f3ee;
}

.palette-trigger-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #5e5d58;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Online presence indicators (sidebar, directory, profile popover) */
.presence-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  border: 2px solid #0b0c0e;
  box-sizing: content-box;
  pointer-events: none;
}

.presence-status-dot--online {
  background-color: rgba(52, 211, 153, 0.75);
}

.presence-status-dot--away {
  background-color: rgba(148, 163, 184, 0.55);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

.presence-person-indicator.presence-status-dot {
  width: 0.45rem;
  height: 0.45rem;
}

/* Profile live activity block (popover + People detail) */
.nf-live-activity {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  color: #8c8b86;
}

.nf-live-activity-marker {
  position: static;
  width: 0.375rem;
  height: 0.375rem;
  border: 0;
  flex-shrink: 0;
}

.nf-live-activity-marker--offline {
  background-color: rgba(122, 121, 116, 0.55);
  border-radius: 9999px;
}

.nf-live-activity-action {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.nf-live-activity-action:not(.nf-live-activity-action--static) {
  cursor: pointer;
  color: #c4c3be;
  border-radius: 0.375rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nf-live-activity-action:not(.nf-live-activity-action--static):hover {
  color: #edece8;
  background-color: rgba(255, 255, 255, 0.04);
}

.nf-live-activity-action:not(.nf-live-activity-action--static):focus-visible {
  outline: 1px solid rgba(240, 180, 255, 0.45);
  outline-offset: 2px;
}

.nf-live-activity--linkable .nf-live-activity-label {
  text-decoration: underline;
  text-decoration-color: rgba(196, 195, 190, 0.35);
  text-underline-offset: 2px;
}

.nf-live-activity--profile-page {
  font-size: 12px;
  color: #92918c;
}

/* Scoped live cursors (managed presence) */
.nf-cursor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 35;
}

.nf-remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  pointer-events: none;
  will-change: transform;
  transition: transform 50ms linear;
  opacity: 0.88;
  z-index: 1;
}

.nf-remote-cursor-arrow {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.nf-remote-cursor-label {
  margin-top: 0.7rem;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0.35rem;
  padding: 0.1rem 0.35rem;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: #f4f3ee;
  opacity: 0.78;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .presence-status-dot,
  .presence-person-indicator,
  .nf-live-activity-action,
  .nf-remote-cursor {
    transition: none;
  }
}

/* DocumentShell: editor-first workspace on /documents/<id> */
.nf-doc-shell {
  --nf-doc-workspace-bg: var(--th-panel, #0B0C0E);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3.5rem);
  background: var(--nf-doc-workspace-bg);
  color: #edece8;
}

.nf-doc-shell__chrome {
  flex-shrink: 0;
  background: var(--nf-doc-workspace-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 20;
}

.nf-doc-shell__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem 0.35rem;
  min-height: 3rem;
}

.nf-doc-shell__appbar-leading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}

.nf-doc-shell__back,
.nf-doc-shell__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #92918c;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
  flex-shrink: 0;
}

.nf-doc-shell__back:hover,
.nf-doc-shell__icon-btn:hover {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.06);
}

.nf-doc-shell__title-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.nf-doc-shell__title-input,
.nf-doc-shell__title-text {
  width: 100%;
  max-width: 28rem;
  background: transparent;
  border: 0;
  outline: none;
  color: #f4f3ee;
  font-family: Inter, "Segoe UI", Manrope, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding: 0.15rem 0.35rem;
  margin: 0 -0.35rem;
  border-radius: 0.35rem;
}

.nf-doc-shell__title-input:hover,
.nf-doc-shell__title-input:focus {
  background: rgba(255, 255, 255, 0.04);
}

.nf-doc-shell__title-input::placeholder {
  color: #5e5d58;
}

.nf-doc-shell__title-path {
  margin: 0;
  padding: 0 0.35rem;
  color: #5e5d58;
  font-size: 0.6875rem;
  line-height: 1.2;
}

.nf-doc-shell__appbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.nf-doc-shell__toolbar-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.65rem 0.55rem;
  min-height: 2.75rem;
  background: var(--nf-doc-workspace-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nf-doc-shell__mode-control {
  flex-shrink: 0;
}

.nf-doc-shell__toolbar-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nf-doc-shell__toolbar-trailing {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.nf-doc-shell__top {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--nf-doc-workspace-bg);
}

.nf-doc-shell__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  flex-wrap: wrap;
}

.nf-doc-shell__top-leading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.nf-doc-shell__crumbs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.nf-doc-shell__top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.nf-doc-shell__body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--nf-doc-workspace-bg);
}

.nf-doc-shell__section-rail {
  display: flex;
  flex-direction: column;
  width: 14.5rem;
  flex-shrink: 0;
  background: var(--nf-doc-workspace-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 0.55rem 1rem;
  gap: 0.45rem;
}

.nf-doc-shell__section-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0 0.35rem 0.35rem;
}

.nf-doc-shell__section-rail-label {
  color: #8c8b86;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nf-doc-shell__section-rail-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  border: 0;
  background: transparent;
  color: #8c8b86;
  cursor: pointer;
}

.nf-doc-shell__section-rail-add:hover {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.06);
}

.nf-doc-shell__section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-height: 0;
  position: relative;
}

.nf-doc-shell__section-list[data-nf-doc-section-sortable="1"] .nf-doc-shell__section-tab {
  cursor: grab;
  touch-action: none;
}

.nf-doc-shell__section-list.is-sorting {
  user-select: none;
}

.nf-doc-shell__section-list.is-sorting .nf-doc-shell__section-tab {
  cursor: grabbing;
}

.nf-doc-shell__section-item.is-dragging {
  opacity: 0.45;
}

.nf-doc-shell__section-drop-indicator {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  height: 2px;
  border-radius: 999px;
  background: #F0B4FF;
  box-shadow: 0 0 0 1px rgba(240, 180, 255, 0.35);
  pointer-events: none;
  z-index: 2;
}

.nf-doc-shell__section-rail-hint {
  margin: 0.55rem 0.35rem 0;
  font-size: 0.6875rem;
  line-height: 1.35;
}

.nf-doc-shell__section-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.1rem;
  position: relative;
}

.nf-doc-shell__section-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.65rem;
  border: 0;
  background: transparent;
  color: #b0afa9;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.nf-doc-shell__section-tab:hover {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.04);
}

.nf-doc-shell__section-tab.is-active {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.06);
}

.nf-doc-shell__section-tab-icon {
  flex-shrink: 0;
  color: #8c8b86;
}

.nf-doc-shell__section-tab.is-active .nf-doc-shell__section-tab-icon {
  color: #edece8;
}

.nf-doc-shell__section-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-doc-shell__section-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  min-height: 1.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: #8c8b86;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.nf-doc-shell__section-add:hover {
  color: #edece8;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}

.nf-doc-shell__panel {
  display: none;
  flex-direction: column;
  width: 17rem;
  flex-shrink: 0;
  background: var(--nf-doc-workspace-bg);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 0;
  overflow: auto;
}

.nf-doc-shell.is-panel-open .nf-doc-shell__panel {
  display: flex;
}

.nf-doc-shell__canvas {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--nf-doc-workspace-bg);
}

.nf-doc-shell__canvas-chrome {
  flex-shrink: 0;
  padding: 1rem 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nf-doc-shell__title-input {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nf-doc-shell__canvas-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem 1.5rem 2.5rem;
}

.nf-doc-shell__canvas-body--rich {
  max-width: 52rem;
  width: 100%;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.nf-doc-shell__canvas-body--sheet {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

.nf-doc-shell__canvas-body--flowchart {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

.nf-flowchart-canvas {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
}

.nf-flowchart-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.nf-flowchart-title-input {
  width: 100%;
}

.nf-flowchart-topbar-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nf-flowchart-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.nf-flowchart-root {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.nf-flowchart-error {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.nf-flowchart-node {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #101114;
  color: #EDECE8;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 12px;
  line-height: 1.35;
  min-width: 72px;
  min-height: 36px;
  box-sizing: border-box;
}

.nf-flowchart-node--shape {
  background: #15161A;
}

.nf-flowchart-node--text {
  background: transparent;
  border: none;
}

.nf-flowchart-text-content {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  line-height: 1.35;
  letter-spacing: normal;
  box-sizing: border-box;
}

.nf-flowchart-node--text.is-auto-width .nf-flowchart-text-content {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

.nf-flowchart-node--text.is-fixed-width .nf-flowchart-text-content {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Text resize: emphasize side handles; height stays content-driven. */
.nf-flowchart-node--text .react-flow__resize-control.top,
.nf-flowchart-node--text .react-flow__resize-control.bottom {
  opacity: 0.35;
}

.nf-flowchart-node--group {
  background: rgba(234, 232, 223, 0.04);
  border-style: dashed;
  border-color: rgba(196, 195, 190, 0.45);
}

.nf-flowchart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
  flex-shrink: 0;
}

.nf-flowchart-toolbar-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  padding-right: 0.45rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.nf-flowchart-toolbar-group:last-child {
  border-right: 0;
}

.nf-flowchart-toolbar-group--style {
  gap: 0.35rem;
}

.nf-flowchart-toolbar-group--compact {
  gap: 0.15rem;
  padding-right: 0.35rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.nf-flowchart-toolbar-label,
.nf-flowchart-toolbar-field-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5E5D58;
}

.nf-flowchart-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nf-flowchart-tool-btn {
  height: 28px;
  padding: 0 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #C4C3BE;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.nf-flowchart-tool-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nf-flowchart-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  color: #EDECE8;
}

.nf-flowchart-tool-btn.is-active {
  background: rgba(234, 232, 223, 0.12);
  color: #EAE8DF;
  border-color: rgba(234, 232, 223, 0.22);
}

.nf-flowchart-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nf-flowchart-tool-select {
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #15161A;
  color: #EDECE8;
  font-size: 11px;
  padding: 0 0.4rem;
}

.nf-flowchart-node.is-selected {
  outline: none;
}

.nf-flowchart-hand .react-flow__pane {
  cursor: grab;
}

.nf-flowchart-hand .react-flow__pane:active {
  cursor: grabbing;
}

.nf-flowchart-select .react-flow__pane {
  cursor: default;
}

.nf-flowchart-drawing .nf-flowchart-draw-layer {
  cursor: crosshair;
}

.nf-flowchart-connecting .react-flow__pane {
  cursor: crosshair;
}

/* Kill React Flow link-pointer / grab-on-hover - Figma uses arrow until drag starts. */
.nf-flowchart-react-host .react-flow__node,
.nf-flowchart-react-host .react-flow__node.selectable,
.nf-flowchart-react-host .react-flow__node.draggable,
.nf-flowchart-react-host .react-flow__edge,
.nf-flowchart-react-host .react-flow__edge.selectable,
.nf-flowchart-react-host .react-flow__pane.selection {
  cursor: default !important;
}

.nf-flowchart-select .react-flow__node.draggable:active,
.nf-flowchart-select .react-flow__node.dragging,
.nf-flowchart-react-host .react-flow__node.dragging {
  cursor: grabbing !important;
}

.nf-flowchart-hand .react-flow__pane,
.nf-flowchart-hand .react-flow__node,
.nf-flowchart-hand .react-flow__edge {
  cursor: grab !important;
}

.nf-flowchart-hand .react-flow__pane:active {
  cursor: grabbing !important;
}

.nf-flowchart-connecting .react-flow__pane,
.nf-flowchart-connecting .react-flow__node.selectable,
.nf-flowchart-connecting .nf-flowchart-handle,
.nf-flowchart-connecting .react-flow__handle {
  cursor: crosshair !important;
}

.nf-flowchart-react-host .react-flow__resize-control {
  z-index: 6;
}

.nf-flowchart-react-host .react-flow__resize-control.handle {
  width: 8px;
  height: 8px;
  border: 1px solid #070709;
  background: #EAE8DF;
  border-radius: 1px;
  cursor: nwse-resize;
}

.nf-flowchart-react-host .react-flow__resize-control.handle.left,
.nf-flowchart-react-host .react-flow__resize-control.handle.right {
  cursor: ew-resize;
}

.nf-flowchart-react-host .react-flow__resize-control.handle.top,
.nf-flowchart-react-host .react-flow__resize-control.handle.bottom {
  cursor: ns-resize;
}

.nf-flowchart-react-host .react-flow__resize-control.line {
  border-color: rgba(234, 232, 223, 0.7);
}

.nf-flowchart-handle {
  cursor: crosshair !important;
}

.nf-flowchart-node--shape,
.nf-flowchart-node--text,
.nf-flowchart-node--entity {
  overflow: visible;
}

.nf-flowchart-group-label {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #8C8B86;
  pointer-events: none;
}

/* Draw layer already captures pointer input. Do not zero node hit-testing:
   peek-under-draw-layer must still see .react-flow__node via elementFromPoint. */

.nf-flowchart-layers {
  width: 260px;
  max-width: 40%;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.nf-flowchart-layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #EDECE8;
  font-size: 12px;
}

.nf-flowchart-layers-list {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: 0.35rem 0;
}

.nf-flowchart-layers-empty {
  padding: 0.75rem;
  color: #5E5D58;
  font-size: 12px;
}

.nf-flowchart-layer-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.nf-flowchart-layer-row.is-selected {
  background: rgba(234, 232, 223, 0.06);
}

.nf-flowchart-layer-row.is-hidden {
  opacity: 0.55;
}

.nf-flowchart-layer-select {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

.nf-flowchart-layer-kind {
  font-size: 9px;
  text-transform: uppercase;
  color: #5E5D58;
  width: 42px;
  flex-shrink: 0;
}

.nf-flowchart-layer-name,
.nf-flowchart-layer-name-ro {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #EDECE8;
  background: transparent;
  border: 0;
  outline: none;
}

.nf-flowchart-layer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding-left: 42px;
}

.nf-flowchart-layer-actions button {
  height: 22px;
  padding: 0 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #8C8B86;
  font-size: 10px;
  cursor: pointer;
}

.nf-flowchart-layer-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nf-flowchart-conflict {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #15161A;
  color: #EDECE8;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nf-flowchart-conflict-msg {
  font-size: 12px;
  line-height: 1.4;
  max-width: 520px;
}

.nf-flowchart-conflict-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 0;
  background: #EAE8DF;
  color: #070709;
  font-weight: 600;
  cursor: pointer;
}

.nf-flowchart-node--entity {
  background: #15161A;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

.nf-flowchart-node--entity.is-unavailable {
  opacity: 0.72;
  border-style: dashed;
}

.nf-flowchart-entity-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 0.45rem 0.55rem;
  box-sizing: border-box;
}

.nf-flowchart-entity-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.nf-flowchart-entity-kind {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8C8B86;
  font-weight: 700;
}

.nf-flowchart-entity-open {
  height: 20px;
  padding: 0 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(234, 232, 223, 0.08);
  color: #EAE8DF;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.nf-flowchart-entity-main {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-height: 0;
  flex: 1;
}

.nf-flowchart-entity-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nf-flowchart-entity-title {
  font-size: 12px;
  font-weight: 600;
  color: #EDECE8;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nf-flowchart-entity-meta {
  font-size: 10px;
  color: #8C8B86;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-flowchart-entity-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #101114;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nf-flowchart-entity-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #C4C3BE;
}

.nf-flowchart-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #EDECE8;
}

.nf-flowchart-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6A6964;
}

.nf-flowchart-status--rose {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.25);
}
.nf-flowchart-status--rose .nf-flowchart-status-dot { background: #fb7185; }

.nf-flowchart-status--amber {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
.nf-flowchart-status--amber .nf-flowchart-status-dot { background: #fbbf24; }

.nf-flowchart-status--emerald {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}
.nf-flowchart-status--emerald .nf-flowchart-status-dot { background: #34d399; }

.nf-flowchart-status--indigo {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.nf-flowchart-status--indigo .nf-flowchart-status-dot { background: #869AC4; }

.nf-flowchart-status--gray {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.nf-flowchart-entity-insert {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 280px;
  max-width: calc(100% - 1rem);
  max-height: min(420px, calc(100% - 1rem));
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #15161A;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.nf-flowchart-entity-insert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #EDECE8;
  font-size: 12px;
}

.nf-flowchart-entity-insert-search input {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #101114;
  color: #EDECE8;
  padding: 0 0.55rem;
  font-size: 12px;
}

.nf-flowchart-entity-insert-results {
  overflow: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nf-flowchart-entity-insert-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.4rem;
  row-gap: 0.1rem;
  text-align: left;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #EDECE8;
  cursor: pointer;
}

.nf-flowchart-entity-insert-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.nf-flowchart-entity-insert-row .nf-flowchart-entity-kind {
  grid-row: 1 / span 2;
  align-self: center;
}

.nf-flowchart-entity-insert-title {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-flowchart-entity-insert-row .nf-flowchart-entity-meta {
  grid-column: 2;
}

.nf-doc-shell__viewer-mount {
  min-height: 480px;
  height: min(75vh, 720px);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nf-doc-shell-editor-host .neurofy-tiptap-editor,
.nf-doc-shell-editor .neurofy-tiptap-editor {
  border-color: rgba(255, 255, 255, 0.08);
}

.nf-doc-shell-editor-host .tiptap.ProseMirror,
.nf-doc-shell-editor .tiptap.ProseMirror {
  min-height: min(60vh, 560px);
  padding: 1rem 1.15rem 2rem;
}

.nf-doc-editor-toolbar.is-expanded {
  display: flex;
}

.nf-sheet-canvas {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
}

.nf-sheet-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
}

.nf-sheet-title-input {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nf-sheet-formula-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #090a0c;
}

.nf-sheet-formula-bar__label {
  color: #5e5d58;
  flex-shrink: 0;
  min-width: 1.25rem;
}

.nf-sheet-formula-bar__input {
  width: 100%;
  height: 1.85rem;
  background: #101114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 0 0.55rem;
  color: #edece8;
}

.nf-sheet-formula-bar__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.16);
}

.nf-sheet-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

.nf-sheet-grid-host,
.nf-sheet-viewport {
  flex: 1;
  min-height: 280px;
  background: #090a0c;
  overflow: auto;
  position: relative;
  outline: none;
  user-select: none;
}

.nf-sheet-grid-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  min-height: 100%;
  padding: 2rem 1rem;
}

.nf-sheet-tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  padding: 0.3rem 0.45rem;
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  bottom: 0;
  z-index: 8;
}

.nf-sheet-tab {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.65rem;
  border-radius: 0.375rem 0.375rem 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  color: #8c8b86;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.nf-sheet-tab:hover {
  color: #edece8;
  background: rgba(255, 255, 255, 0.04);
}

.nf-sheet-tab.is-active {
  color: #f4f3ee;
  background: #101114;
  border-color: rgba(255, 255, 255, 0.08);
}

.nf-sheet-tab--add {
  width: 1.75rem;
  padding: 0;
  justify-content: center;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
}

@media (max-width: 900px) {
  .nf-doc-shell__section-rail {
    width: 11.5rem;
  }

  .nf-doc-shell.is-panel-open .nf-doc-shell__panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(17rem, 88vw);
    z-index: 30;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 640px) {
  .nf-doc-shell__section-rail {
    display: none;
  }

  .nf-doc-shell.is-sections-open .nf-doc-shell__section-rail {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(12rem, 80vw);
    z-index: 30;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
  }
}


.nf-doc-shell__doc-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.nf-doc-shell__section-actions {
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 120ms ease;
}

.nf-doc-shell__section-item:hover .nf-doc-shell__section-actions,
.nf-doc-shell__section-item:focus-within .nf-doc-shell__section-actions,
.nf-doc-shell__section-actions.is-open,
.nf-doc-shell__section-tab.is-active ~ .nf-doc-shell__section-actions {
  opacity: 1;
}

.nf-doc-shell__section-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  color: #8c8b86;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.nf-doc-shell__section-more:hover {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.08);
}

.nf-doc-shell__section-menu {
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  z-index: 40;
  min-width: 8.5rem;
  padding: 0.3rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1a1b1e;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.nf-doc-shell__section-menu[hidden] {
  display: none !important;
}

.nf-doc-shell__section-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #edece8;
  font-size: 0.75rem;
  cursor: pointer;
}

.nf-doc-shell__section-menu-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.nf-doc-shell__section-menu-item:disabled {
  opacity: 0.35;
  cursor: default;
}

.nf-doc-shell__section-move,
.nf-doc-shell__section-rename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  color: #5e5d58;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.nf-doc-shell__section-move:hover,
.nf-doc-shell__section-rename:hover {
  color: #edece8;
  background: rgba(255, 255, 255, 0.06);
}

.nf-doc-shell__section-move:disabled {
  opacity: 0.25;
  cursor: default;
}

.nf-doc-shell__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  height: 100%;
  padding: 0.85rem;
}

.nf-doc-shell__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  flex-shrink: 0;
}

.nf-doc-shell__panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
}

.nf-doc-shell__panel-tab {
  height: 1.65rem;
  padding: 0 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  color: #8c8b86;
  font-size: 0.75rem;
  cursor: pointer;
  background: transparent;
}

.nf-doc-shell__panel-tab:hover {
  color: #edece8;
  background: rgba(255, 255, 255, 0.04);
}

.nf-doc-shell__panel-tab.is-active {
  color: #f4f3ee;
  background: #101114;
  border-color: rgba(255, 255, 255, 0.08);
}

.nf-doc-shell__panel-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.nf-doc-shell__panel-pane.is-active {
  display: block;
}

.nf-doc-shell.is-panel-open .nf-doc-shell__panel-toggle {
  color: #edece8;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.nf-sheet-grid-host {
  position: relative;
}

.nf-sheet-grid-chrome {
  display: none;
}

.nf-sheet-cell {
  border-right: 1px solid rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  background: #090a0c;
}

.nf-sheet-grid-overlay {
  display: none;
}

/* Artifacts rich-document collaboration status (pilot) */
.nf-doc-collab-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #8c8b86;
}

.nf-doc-collab-status__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #5c5b57;
}

.nf-doc-collab-status[data-state="connecting"] .nf-doc-collab-status__dot,
.nf-doc-collab-status[data-state="reconnecting"] .nf-doc-collab-status__dot {
  background: #d4a574;
}

.nf-doc-collab-status[data-state="live"] .nf-doc-collab-status__dot {
  background: #6ee7b7;
}

.nf-doc-collab-status[data-state="fallback"] .nf-doc-collab-status__dot,
.nf-doc-collab-status[data-state="unavailable"] .nf-doc-collab-status__dot {
  background: #5c5b57;
}

/* TipTap collaboration cursors (editor-local awareness) */
.collaboration-cursor__caret {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  word-break: normal;
  pointer-events: none;
}

.collaboration-cursor__label {
  position: absolute;
  top: -1.4em;
  left: -1px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem 0.25rem 0.25rem 0;
  color: #0b0c0e;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.85;
  user-select: none;
}

/* ==========================================================================
   4. Drawer / modal / profile popover motion (CSS fallback when motion.dev unavailable)
   ========================================================================== */

#global-profile-popover.hidden,
#global-profile-popover.surface-closing {
  pointer-events: none !important;
}

#global-profile-popover.surface-open:not(.nf-motion-active) {
  animation: neurofySurfaceFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#global-profile-popover.surface-closing:not(.nf-motion-active) {
  animation: neurofySurfaceFadeOut 0.14s ease-in both;
}

#blockerModal.surface-open > .relative:not(.nf-motion-active),
#bugModal.surface-open .nf-entity-modal-panel:not(.nf-motion-active),
#task-detail-modal.surface-open .nf-entity-modal-panel:not(.nf-motion-active),
#createInitiativeModal.surface-open > .nf-platform-modal-panel:not(.nf-motion-active),
#createTaskModal.surface-open > .nf-platform-modal-panel:not(.nf-motion-active),
#global-confirm-modal.surface-open > .nf-platform-modal-panel:not(.nf-motion-active),
#health-breakdown-modal.surface-open > .nf-platform-modal-panel:not(.nf-motion-active) {
  animation: neurofyModalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nf-entity-modal-panel {
  min-height: min(70vh, 640px);
}

#bugModal .nf-entity-modal-panel {
  min-height: 0;
}

#task-modal-content.nf-entity-modal-inner,
#bug-modal-content.nf-entity-modal-inner {
  position: relative;
  min-height: min(68vh, 620px);
}

#task-modal-content.nf-task-modal-inner,
#bug-modal-content.nf-bug-modal-inner {
  min-height: 0;
}

.nf-task-modal-panel,
.nf-bug-modal-panel {
  min-height: 0;
  width: min(100%, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
}

/*
  Top-anchor Task/Bug shells so growth expands downward.
  Vertical centering made header/assignees jump when Result vs Discussion
  changed content height.
  Keep overflow visible here: overflow on this pointer-events-none wrapper
  interfered with Radix/menu hit-testing and portal positioning.
*/
#task-detail-modal > .flex.h-full,
#bugModal > .flex.h-full {
  align-items: flex-start;
  padding-top: max(0.75rem, 3.5vh);
  overflow: visible;
}

/*
  Task + Bug shells: content-hug height with a hard cap.
  Short Result/Overview content must not leave dead space under the body;
  tall Discussion/Activity grows the panel then scrolls inside.
*/
.nf-task-modal-panel,
.nf-bug-modal-panel {
  height: auto;
  max-height: min(92vh, 900px);
}

#bugModal #bug-modal-content.nf-bug-modal-inner {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

#bugModal .bug-detail-surface {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
}

/* View + create Task: hug content; scroll the body when capped. */
#task-detail-modal #task-modal-content.nf-task-modal-inner {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#task-detail-modal .task-command-center,
#task-detail-modal .task-command-center > form {
  flex: 1 1 auto;
  min-height: 0;
  /* Keep visible: clipping here hid in-tree menu geometry before portal. */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

#task-detail-modal .task-command-center__sticky,
#task-detail-modal .task-command-center__tabs {
  flex-shrink: 0;
  overflow: visible;
}

#task-detail-modal .task-command-center__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Create Task: whole sheet can scroll (no sticky chrome to preserve). */
#task-detail-modal.nf-entity-modal-create #task-modal-content,
#task-detail-modal:has(.task-command-center--create) #task-modal-content {
  overflow-y: auto;
}

#task-detail-modal.nf-entity-modal-create .task-command-center--create,
#task-detail-modal.nf-entity-modal-create .task-command-center--create > form,
#task-detail-modal:has(.task-command-center--create) .task-command-center--create,
#task-detail-modal:has(.task-command-center--create) .task-command-center--create > form {
  overflow-y: visible;
}

#task-detail-modal.nf-entity-modal-create .task-command-center__scroll,
#task-detail-modal:has(.task-command-center--create) .task-command-center__scroll {
  flex: 0 1 auto;
  overflow-y: visible;
}

/* Create only: do not force flex-grow fill (hug sheet). View keeps flex grow
   so max-height caps scroll inside __scroll without clipping header menus. */
#task-detail-modal.nf-entity-modal-create .task-command-center--create.flex-1,
#task-detail-modal.nf-entity-modal-create .task-command-center--create > form.flex-1,
#task-detail-modal:has(.task-command-center--create) .task-command-center--create.flex-1,
#task-detail-modal:has(.task-command-center--create) .task-command-center--create > form.flex-1,
#task-detail-modal:has(.task-command-center--create) .task-command-center__scroll.flex-1 {
  flex: 0 1 auto;
}

@media (min-width: 640px) {
  #task-detail-modal .nf-task-modal-panel,
  #bugModal .nf-bug-modal-panel {
    width: min(40rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }
}

@media (min-width: 1024px) {
  #task-detail-modal .nf-task-modal-panel,
  #bugModal .nf-bug-modal-panel {
    /* Stay near 50rem until the panel can host a comfortable main+rail pair. */
    width: min(50rem, calc(100vw - 2rem));
    max-width: min(50rem, calc(100vw - 2rem));
  }
}

@media (min-width: 1280px) {
  #task-detail-modal .nf-task-modal-panel,
  #bugModal .nf-bug-modal-panel {
    width: min(56rem, calc(100vw - 2rem));
    max-width: min(56rem, calc(100vw - 2rem));
  }
}

/* Content item modal reuses the task shell with a wider panel and higher stack
   so it stays interactive above the campaign drawer (same base z as drawer). */
#task-detail-modal.nf-content-item-modal-active {
  z-index: 76;
}

@media (min-width: 640px) {
  #task-detail-modal.nf-content-item-modal-active .nf-task-modal-panel {
    width: min(48rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }
}

@media (min-width: 1024px) {
  #task-detail-modal.nf-content-item-modal-active .nf-task-modal-panel {
    width: clamp(56rem, 52vw, 68rem);
    max-width: min(68rem, calc(100vw - 2rem));
  }

  .task-command-center--content-item .task-command-center__layout:not(.task-command-center__layout--segments),
  .task-command-center--content-item.task-command-center--create .task-command-center__layout:not(.task-command-center__layout--segments) {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  }

  .task-command-center--content-item .task-command-center__layout--segments {
    grid-template-columns: minmax(0, 1fr);
  }
}

.task-command-center--content-item .task-command-center__main > [data-task-cmd-panel] {
  display: flex;
  flex-direction: column;
  gap: var(--task-cmd-block-gap);
}

.task-command-center--content-item .content-item-cmd-tabs {
  flex-shrink: 0;
  background: #101114;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.task-command-center--content-item .content-item-cmd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  margin-bottom: 0;
  color: #5e5d58;
}

.task-command-center--content-item .content-item-cmd-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #92918c;
  font: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}

.task-command-center--content-item .content-item-cmd-breadcrumb__link:hover {
  color: #edece8;
}

.task-command-center--content-item .content-item-cmd-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.12);
  user-select: none;
}

.task-command-center--content-item .content-item-cmd-id-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92918c;
}

.task-command-center--content-item .content-item-cmd-overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(244, 63, 94, 0.25);
  background: rgba(244, 63, 94, 0.15);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fda4af;
}

.task-command-center--content-item .content-item-cmd-field-stack {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.task-command-center--content-item .content-item-cmd-field-label {
  margin-bottom: 0;
}

.task-command-center--content-item .content-item-cmd-input {
  width: 100%;
  min-width: 0;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #090a0c;
  color: #edece8;
  font-size: 0.8125rem;
  line-height: 1.35;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.task-command-center--content-item .content-item-cmd-input::placeholder {
  color: #5e5d58;
}

.task-command-center--content-item .content-item-cmd-input:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.task-command-center--content-item .content-item-cmd-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.task-command-center--content-item .content-item-cmd-input--date {
  padding-right: 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.task-command-center--content-item .content-item-cmd-metrics {
  display: grid;
  gap: 0.875rem;
}

@media (min-width: 640px) {
  .task-command-center--content-item .content-item-cmd-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

.task-command-center--content-item .content-item-cmd-dates {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .task-command-center--content-item .content-item-cmd-dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

.task-command-center--content-item .content-item-cmd-date-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}

.task-command-center--content-item .content-item-cmd-team {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .task-command-center--content-item .content-item-cmd-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.875rem;
  }
}

.task-command-center--content-item .content-item-cmd-team .task-cmd-rail-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}

.task-command-center--content-item .content-item-readiness-shell {
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.task-command-center--content-item .content-item-cmd-prose-section .md-editor,
.task-command-center--content-item .content-item-cmd-prose-section [data-md-editor] {
  max-width: 72rem;
}

.task-command-center--content-item .task-command-center__section .md-editor .ProseMirror,
.task-command-center--content-item .task-command-center__section .md-editor-input {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.task-command-center--content-item .content-item-att-row {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.task-command-center--content-item .content-item-att-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.task-command-center--content-item .content-item-create-footer {
  padding: var(--task-cmd-inset-y) var(--task-cmd-inset-x);
}

@media (max-width: 639px) {
  .task-command-center--content-item .task-cmd-quick-props {
    gap: 0.5rem 0.65rem;
  }

  .task-command-center--content-item .task-cmd-quick-field {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: calc(50% - 0.35rem);
  }

  .task-command-center--content-item .task-cmd-quick-field:last-child {
    flex-basis: 100%;
    min-width: 100%;
  }
}

.task-command-center--daily-log {
  min-height: 0;
}

.task-command-center {
  --task-cmd-inset-x: 1rem;
  --task-cmd-inset-y: 0.75rem;
  --task-cmd-block-gap: 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: #edece8;
}

.task-command-center__sticky {
  flex-shrink: 0;
  z-index: 5;
  background: #101114;
  border-bottom: none;
  padding: var(--task-cmd-inset-y) var(--task-cmd-inset-x) 0.5rem;
}

.task-command-center__title,
.task-command-center__title.type-page-title,
.task-command-center__title.type-modal-title {
  font-size: var(--type-section-size);
  font-weight: var(--type-weight-title);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #faf9f5;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 3.75em;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.task-command-center__title-meta {
  margin-top: 0.25rem;
}

.task-command-center__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--task-cmd-inset-y) var(--task-cmd-inset-x) 1rem;
}

.task-command-center__create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  width: 100%;
  padding: 0.75rem var(--task-cmd-inset-x) var(--task-cmd-inset-y);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: #101114;
}

.task-command-center__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.task-command-center__title-row .task-command-center__title {
  flex: 1 1 auto;
  min-width: 0;
}

.task-command-center__title-row > .shrink-0,
.task-command-center__title-row > [aria-label="Close task"] {
  flex-shrink: 0;
}

.task-command-center__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--task-cmd-block-gap);
  align-items: start;
}

.task-command-center__main {
  min-width: 0;
}

.task-command-center__main > [data-task-cmd-panel] {
  min-width: 0;
}

.task-command-center__main > [data-task-cmd-panel="overview"] {
  display: flex;
  flex-direction: column;
  gap: var(--task-cmd-block-gap);
}

/* Two-column rail only when the modal panel itself is wide enough.
   Viewport 1024 still yields ~800px panels; keep single column until ~52rem. */
.nf-task-modal-panel,
.nf-bug-modal-panel {
  container-type: inline-size;
  container-name: entity-modal;
}

@container entity-modal (min-width: 52rem) {
  .task-command-center__layout {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 14.5rem);
    column-gap: 1.25rem;
  }

  .task-command-center--focus .task-command-center__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-command-center--focus .task-command-center__rail {
    display: none;
  }

  .task-command-center__rail {
    border-top: none;
    border-left: none;
    padding-top: 0;
    padding-left: 0.25rem;
  }
}

.task-command-center__rail {
  min-width: 0;
  border-top: none;
  padding-top: 0.25rem;
}

.task-command-center__section {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.task-command-center__section:last-child,
.task-command-center__section--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.task-command-center__section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5d58;
  margin-bottom: 0.5rem;
}

.task-command-center__section--skills {
  display: flex;
  flex-direction: column;
  gap: var(--task-cmd-block-gap);
}

.task-command-center__section--skills [data-task-skill-requirements],
.task-command-center__section--skills [data-ai-skill-assessment-panel] {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0 !important;
}

.task-command-center__section--skills [data-task-skill-requirements] h3,
.task-command-center__section--skills [data-ai-skill-assessment-panel] h3 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5d58;
}

.task-command-center__section--skills [data-task-skill-requirements] {
  border-color: transparent;
}

.task-command-center [data-task-skill-requirements] .rounded-lg.border,
.task-command-center [data-ai-skill-assessment-panel] .rounded-lg.border {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

.task-command-center [data-task-skill-requirements] .border-dashed {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}

.task-command-center .task-cmd-attachments .neurofy-dropzone-compact,
.task-command-center .task-cmd-attachments [data-neurofy-dropzone] {
  border-radius: 0.75rem;
}

.task-command-center .task-cmd-attachments.attachments-and-documents-section {
  background: transparent;
  border: none;
  padding: 0;
}

.task-command-center .task-cmd-attachments .border-t,
.task-command-center .task-cmd-attachments .border-b {
  border-color: rgba(255, 255, 255, 0.04);
}

.task-command-center .task-cmd-linked-docs [data-linked-docs-attach-btn] {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
}

.task-cmd-quick-props {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding: 0.5rem 0 0.15rem;
}

.task-cmd-quick-props .radix-select-trigger,
.task-cmd-quick-props .radix-select-trigger.compact {
  min-height: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
}

.task-cmd-quick-field {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  min-height: 2rem;
}

.task-cmd-quick-field label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5e5d58;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.task-cmd-due-input {
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  border-radius: 0.65rem;
  background: #090a0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #edece8;
}

.task-cmd-quick-props .task-cmd-due-input {
  width: 10.25rem;
  max-width: 10.25rem;
}

.task-cmd-due-input:focus {
  outline: none;
  border-color: rgba(234, 232, 223, 0.35);
  box-shadow: 0 0 0 2px rgba(234, 232, 223, 0.12);
}

.task-command-blocker-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 var(--task-cmd-inset-x, 1rem) 0.35rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(244, 63, 94, 0.045);
  border: 1px solid rgba(244, 63, 94, 0.12);
  font-size: 0.75rem;
  line-height: 1.35;
}

.task-command-blocker-alert .task-cmd-blocker-label {
  color: #fda4af;
  font-weight: 600;
}

.task-command-blocker-alert .task-cmd-blocker-action {
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #edece8;
  cursor: pointer;
  flex-shrink: 0;
}

.task-command-blocker-alert .task-cmd-blocker-action:hover {
  background: rgba(255, 255, 255, 0.06);
}

.task-command-blocker-alert .task-cmd-blocker-action--resolve {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #a7f3d0;
}

.task-command-blocker-alert .task-cmd-blocker-action--resolve:hover {
  background: rgba(16, 185, 129, 0.16);
}

.task-command-center__tabs {
  padding: 0.25rem var(--task-cmd-inset-x, 1rem) 0.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: #101114;
}

.task-command-center__tabs .nf-segment-group {
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 0.125rem;
  border-radius: 0;
}

.task-command-center__tabs .nf-segment-indicator {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  box-shadow: none;
  border-radius: 0.5rem;
}

.task-command-center__tabs .nf-segment-item {
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.task-command-center__tabs .nf-segment-item-active {
  font-weight: 600;
  color: #f4f3ee !important;
}

.task-cmd-discussion-composer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.task-cmd-rail-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0;
  border-bottom: none;
}

.task-cmd-rail-row:last-child {
  border-bottom: none;
}

.task-cmd-rail-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5e5d58;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-command-center [data-task-cmd-panel].hidden,
.bug-detail-surface [data-task-cmd-panel].hidden {
  display: none !important;
}

@media (max-width: 1023px) {
  .task-command-center [data-task-cmd-focus-toggle] {
    display: none;
  }
}

/* Bug detail surface: same Obsidian density/geometry language as Task Command Center */
.bug-detail-surface {
  --bug-inset-x: 1rem;
  --bug-inset-y: 0.75rem;
  --bug-block-gap: 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #101114;
  color: #edece8;
  padding: var(--bug-inset-y) var(--bug-inset-x) 1rem;
}

.bug-detail-surface__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: var(--bug-block-gap);
  border-bottom: none;
}

.bug-detail-surface__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.bug-detail-surface__code {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #92918c;
  flex-shrink: 0;
  margin-top: 0.3rem;
}

.bug-detail-surface__title,
.bug-detail-surface__title.type-modal-title {
  font-size: var(--type-section-size);
  font-weight: var(--type-weight-title);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #faf9f5;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 3.75em;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.125rem 0;
}

.bug-detail-surface__title:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(234, 232, 223, 0.25);
}

.bug-detail-surface__title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  color: #5e5d58;
}

.bug-detail-surface__props {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.bug-detail-surface__props .radix-select-trigger,
.bug-detail-surface__props .radix-select-trigger.compact {
  min-height: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
}

.bug-detail-surface__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bug-block-gap);
  align-items: start;
}

.bug-detail-surface__main,
.bug-detail-surface__rail {
  min-width: 0;
}

.bug-detail-surface__main {
  display: flex;
  flex-direction: column;
  gap: var(--bug-block-gap);
}

@container entity-modal (min-width: 52rem) {
  .bug-detail-surface__layout {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 14.5rem);
    column-gap: 1.25rem;
  }

  .bug-detail-surface__rail {
    border-left: none;
    padding-left: 0.25rem;
  }
}

.bug-detail-surface__section {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.bug-detail-surface__section:last-child,
.bug-detail-surface__section--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.bug-detail-surface__section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5d58;
  margin-bottom: 0.5rem;
}

.bug-detail-surface__rail-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0;
  border-bottom: none;
}

.bug-detail-surface__rail-row:last-child {
  border-bottom: none;
}

.bug-detail-surface__rail-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5e5d58;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bug-detail-surface__field {
  width: 100%;
  min-height: 2rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.8125rem;
  border-radius: 0.65rem;
  background: #090a0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #edece8;
}

.bug-detail-surface__field:focus {
  outline: none;
  border-color: rgba(234, 232, 223, 0.35);
  box-shadow: 0 0 0 2px rgba(234, 232, 223, 0.12);
}

.bug-detail-surface__field::placeholder {
  color: #5e5d58;
}

.bug-detail-surface__comments {
  margin-top: var(--bug-block-gap);
  padding-top: var(--bug-block-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bug-detail-surface__comment-card {
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.bug-detail-surface__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  flex-shrink: 0;
  padding-top: 0.75rem;
  margin-top: var(--bug-block-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bug-detail-surface__title-row .bug-detail-surface__title {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
}

.bug-detail-surface .attachments-and-documents-section,
.bug-detail-surface .task-cmd-attachments {
  background: transparent;
  border: none;
  padding: 0;
}

.bug-detail-surface .attachments-and-documents-section .border-t,
.bug-detail-surface .attachments-and-documents-section .border-b {
  border-color: rgba(255, 255, 255, 0.04);
}

.bug-detail-surface .neurofy-dropzone-compact,
.bug-detail-surface [data-neurofy-dropzone] {
  border-radius: 0.75rem;
}

#bug-modal-content.nf-entity-modal-inner {
  min-height: 0;
}

/*
  Opening / preview shell fills a stable panel height (see .nf-entity-modal-opening)
  so hug-content modals do not flash as a tiny spinner then jump to full size.
*/
.nf-entity-modal-loading-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 2;
  background: #101114;
}

.nf-entity-modal-loading-layer:not(.nf-entity-modal-preview) {
  align-items: center;
  justify-content: center;
}

.nf-entity-modal-loading-layer .nf-entity-modal-loading-indicator {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
}

.nf-entity-modal-loading-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid rgba(129, 140, 248, 0.35);
  border-top-color: rgb(129, 140, 248);
  border-radius: 9999px;
  animation: nfEntityModalSpin 0.75s linear infinite;
}

/* While loading/preview HTML is mounted, keep Task/Bug panels at the classic
   full opening size so title + spinner animate in a stable frame. */
#task-detail-modal.nf-entity-modal-opening .nf-task-modal-panel,
#bugModal.nf-entity-modal-opening .nf-bug-modal-panel {
  height: min(92vh, 900px);
  max-height: min(92vh, 900px);
}

#task-detail-modal.nf-entity-modal-opening #task-modal-content.nf-task-modal-inner,
#bugModal.nf-entity-modal-opening #bug-modal-content.nf-bug-modal-inner {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

@keyframes nfEntityModalSpin {
  to {
    transform: rotate(360deg);
  }
}

.nf-modal-content-in {
  animation: nfModalContentIn 0.16s ease-out both;
}

@keyframes nfModalContentIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hierarchical sidebar groups / leaves (Obsidian tokens). */
#app-sidebar .nf-sidebar-group-toggle:focus-visible {
  outline: 2px solid rgba(234, 232, 223, 0.4);
  outline-offset: 2px;
}

#app-sidebar .nf-sidebar-leaf:focus-visible,
#app-sidebar .nf-sidebar-top-link:focus-visible {
  outline: 2px solid rgba(234, 232, 223, 0.4);
  outline-offset: 2px;
}

#app-sidebar .nf-sidebar-group-chevron {
  transform-origin: center;
}

#app-sidebar .nf-sidebar-leaf.is-active {
  background: rgba(240, 180, 255, 0.12);
}

#app-sidebar .nf-sidebar-leaf-dot {
  border: 1px solid #6A6964;
  background: transparent;
}

#app-sidebar .nf-sidebar-leaf-dot.is-active {
  border-color: transparent;
  background: #F0B4FF;
}

#app-sidebar nav a.nf-sidebar-nav-loading {
  opacity: 0.72;
  pointer-events: none;
}

#app-sidebar nav a.nf-sidebar-nav-loading [data-lucide] {
  animation: nf-sidebar-nav-spin 0.7s linear infinite;
}

@keyframes nf-sidebar-nav-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #app-sidebar nav a.nf-sidebar-nav-loading [data-lucide] {
    animation: none;
  }
}

/* Desktop nav sidebar collapse (html.nf-app-sidebar-collapsed). Mobile drawer stays independent. */
.nf-app-sidebar-expand {
  display: none;
  position: fixed;
  top: 0.75rem;
  left: 0.5rem;
  z-index: 45;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 12, 14, 0.95);
  color: #EDECE8;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.nf-app-sidebar-expand:hover {
  background: rgba(21, 22, 26, 0.98);
  color: #F4F3EE;
}

.nf-app-sidebar-expand:focus-visible {
  outline: 2px solid rgba(234, 232, 223, 0.4);
  outline-offset: 2px;
}
.nf-app-sidebar-collapsed-presence {
  display: none;
  position: fixed;
  top: 3.25rem;
  left: 0.5rem;
  z-index: 45;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 12, 14, 0.95);
  color: #EDECE8;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nf-app-sidebar-collapsed-presence:hover {
  background: rgba(21, 22, 26, 0.98);
  color: #F4F3EE;
  border-color: rgba(255, 255, 255, 0.14);
}

.nf-app-sidebar-collapsed-presence:focus-visible {
  outline: 2px solid rgba(234, 232, 223, 0.4);
  outline-offset: 2px;
}

.nf-presence-collapsed-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: #059669;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #070709;
}
.presence-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 0.375rem;
  justify-items: center;
  width: 100%;
}

#sidebar-presence-grid {
  max-height: 148px;
}

@media (max-height: 720px) {
  #sidebar-presence-grid {
    max-height: 108px;
  }
}

@media (max-height: 560px) {
  #sidebar-presence-grid {
    max-height: 76px;
  }
}



/* Persistent topbar lives outside #app-main (soft-nav safe). */
#app-topbar.nf-app-topbar {
  min-height: 3.5rem;
}

#app-topbar .nf-app-topbar-profile {
  max-width: none;
}

#app-topbar .nf-app-topbar-profile:focus-visible {
  outline: 2px solid rgba(234, 232, 223, 0.4);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  #nf-app-content-column {
    transition: margin-left 280ms ease-out;
  }

  html.nf-app-sidebar-collapsed #app-sidebar {
    transform: translate3d(-100%, 0, 0) !important;
    pointer-events: none;
  }

  html.nf-app-sidebar-collapsed #nf-app-content-column {
    margin-left: 0 !important;
  }

  html.nf-app-sidebar-collapsed .nf-app-sidebar-expand {
    display: inline-flex;
  }

  html.nf-app-sidebar-collapsed .nf-app-sidebar-collapsed-presence {
    display: inline-flex;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  #nf-app-content-column {
    transition: none !important;
  }

  html.nf-app-sidebar-collapsed #app-sidebar,
  #app-sidebar {
    transition: none !important;
  }
}

#nf-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: transparent;
}

#nf-nav-progress.nf-nav-progress-active {
  opacity: 1;
}

#nf-nav-progress.nf-nav-progress-active::before {
  content: "";
  display: block;
  height: 100%;
  width: 35%;
  background: #EAE8DF;
  animation: nf-nav-progress-slide 0.9s ease-in-out infinite;
}

@keyframes nf-nav-progress-slide {
  from { transform: translateX(-120%); }
  to { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  #nf-nav-progress.nf-nav-progress-active::before {
    animation: none;
    width: 100%;
    opacity: 0.85;
  }
}

/* Soft-nav network pending: covers live #app-main without destroying it (rollback-safe). */
#app-main.nf-app-main-nav-pending,
#app-main.nf-app-main-nav-interaction-frozen {
  position: relative;
}

#app-main.nf-app-main-nav-interaction-frozen {
  /* inert is the primary guard; this is a CSS fallback for older engines. */
  cursor: progress;
}

#nf-app-main-nav-placeholder {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: block;
  background: rgba(7, 7, 9, 0.88);
  pointer-events: auto;
}

#nf-app-main-nav-placeholder.nf-app-main-nav-placeholder--calm {
  background: rgba(7, 7, 9, 0.92);
}

.nf-app-main-nav-placeholder-veil {
  position: absolute;
  inset: 0;
  background: transparent;
}

/* Legacy skeleton classes kept inert so old markup cannot flash shapes. */
.nf-app-main-nav-placeholder-skel {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #nf-nav-progress.nf-nav-progress-active {
    opacity: 1;
  }
}

#initiative-drawer-panel,
#suggestion-drawer-panel,
#call-drawer-panel {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#initiative-drawer-backdrop,
#suggestion-drawer-backdrop,
#call-drawer-backdrop {
  transition: opacity 0.2s ease;
}

/* Initiative drawer: slide + progressive backdrop blur (local motion contract) */
#initiative-drawer {
  --nf-initiative-drawer-duration: 260ms;
  --nf-initiative-drawer-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nf-initiative-drawer-blur: 6px;
  --nf-initiative-drawer-dim: 0.42;
}

#initiative-drawer #initiative-drawer-panel {
  transition: transform var(--nf-initiative-drawer-duration) var(--nf-initiative-drawer-ease),
    opacity var(--nf-initiative-drawer-duration) var(--nf-initiative-drawer-ease);
  transform: translate3d(100%, 0, 0);
  opacity: 0.94;
  will-change: transform;
}

#initiative-drawer.nf-initiative-drawer-open #initiative-drawer-panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

#initiative-drawer #initiative-drawer-backdrop {
  background-color: rgba(0, 0, 0, var(--nf-initiative-drawer-dim));
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity var(--nf-initiative-drawer-duration) var(--nf-initiative-drawer-ease),
    backdrop-filter var(--nf-initiative-drawer-duration) var(--nf-initiative-drawer-ease),
    -webkit-backdrop-filter var(--nf-initiative-drawer-duration) var(--nf-initiative-drawer-ease);
}

#initiative-drawer.nf-initiative-drawer-open #initiative-drawer-backdrop {
  opacity: 1;
  backdrop-filter: blur(var(--nf-initiative-drawer-blur));
  -webkit-backdrop-filter: blur(var(--nf-initiative-drawer-blur));
}

@media (prefers-reduced-motion: reduce) {
  #initiative-drawer #initiative-drawer-panel,
  #initiative-drawer #initiative-drawer-backdrop {
    transition-duration: 0.01ms !important;
  }

  #initiative-drawer.nf-initiative-drawer-open #initiative-drawer-panel {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  #initiative-drawer.nf-initiative-drawer-open #initiative-drawer-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.radix-select-content.nf-motion-dropdown-in,
.radix-select-content.nf-motion-dropdown-out {
  animation: none;
}

/* Horizontal segmented controls (sliding indicator) */
.nf-segment-group {
  position: relative;
}

/* Initiative-style underline mode for IA hub switches (e.g. Communication Channels | Meetings). */
.nf-segment-group.nf-segment-group--underline {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 100%;
}

.nf-segment-group.nf-segment-group--underline > .nf-segment-indicator {
  display: none !important;
}

.nf-segment-group.nf-segment-group--underline > .nf-segment-item {
  gap: 0.5rem;
  padding: 0.25rem 0 0.75rem;
  border-radius: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.01em;
  color: #8c8b86;
  font-weight: 500;
}

.nf-segment-group.nf-segment-group--underline > .nf-segment-item:hover {
  color: #edece8;
  background: transparent !important;
}

.nf-segment-group.nf-segment-group--underline > .nf-segment-item-active,
.nf-segment-group.nf-segment-group--underline > .nf-segment-item[aria-pressed="true"] {
  color: #edece8 !important;
  font-weight: 600;
}

.nf-segment-group.nf-segment-group--underline > .nf-segment-item-active::after,
.nf-segment-group.nf-segment-group--underline > .nf-segment-item[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 9999px;
  background: rgb(192, 132, 252);
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.55);
}

.nf-segment-indicator {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    width 180ms cubic-bezier(0.16, 1, 0.3, 1),
    height 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nf-segment-indicator.is-ready {
  opacity: 1;
}

.nf-segment-group > .nf-segment-item,
.nf-segment-group > .work-timeframe-btn,
.nf-segment-group > .work-view-switch {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.nf-segment-item-active,
.nf-segment-group .nf-segment-item[aria-pressed="true"],
.nf-segment-group .work-timeframe-btn[aria-pressed="true"],
.nf-segment-group .work-view-switch[aria-checked="true"] {
  color: #f4f3ee !important;
  font-weight: 600;
}

#app-main.nf-page-enter {
  will-change: opacity;
}

/* Network soft-nav reveal: never full transparent, never translateY. */
#app-main.nf-app-main-reveal {
  will-change: opacity;
}

#app-main.nf-app-main-enter {
  /* Legacy enter class: do not force opacity 0 (caused post-reveal flicker). */
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #app-main.nf-app-main-enter,
  #app-main.nf-app-main-reveal,
  #app-main.nf-page-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* View transitions disabled for soft-nav: they competed with reveal and shell stability. */
html.nf-app-main-vt-active #app-main {
  view-transition-name: none;
}

.nf-container-loading {
  pointer-events: none;
}

/* Work filter refresh: subtle pending state without blocking interaction outside results */
#work-canvas.nf-work-results-pending {
  position: relative;
  opacity: 0.92;
  transition: opacity 0.15s ease-out;
}

#work-canvas.nf-work-results-pending::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(234 232 223 / 0.55),
    transparent
  );
  animation: nf-work-results-pending-bar 0.9s ease-in-out infinite;
}

@keyframes nf-work-results-pending-bar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #work-canvas.nf-work-results-pending::before {
    animation: none;
    opacity: 0.45;
  }
}

.nf-save-error-emphasis {
  box-shadow: 0 0 0 1px rgb(244 63 94 / 0.35);
}

.nf-field-error-emphasis {
  box-shadow: 0 0 0 1px rgb(244 63 94 / 0.45);
  background-color: rgb(244 63 94 / 0.06);
}

.nf-save-saved-emphasis {
  opacity: 1;
}

.nf-status-settle {
  box-shadow: 0 0 0 1px rgb(99 102 241 / 0.28);
}

.nf-item-updated {
  box-shadow: inset 0 0 0 1px rgb(99 102 241 / 0.22);
  background-color: rgb(99 102 241 / 0.04);
}

.nf-toast-item {
  will-change: opacity, transform;
}

.nf-toast-reward {
  border-color: rgb(52 211 153 / 0.35) !important;
}

.nf-toast-celebration {
  border-color: rgb(240 180 255 / 0.4) !important;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(240 180 255 / 0.12);
}

.nf-scroll-affordance {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.nf-scroll-affordance-left {
  left: 0;
  background: linear-gradient(to right, rgb(7 7 9 / 0.72), transparent);
}

.nf-scroll-affordance-right {
  right: 0;
  background: linear-gradient(to left, rgb(7 7 9 / 0.72), transparent);
}

.nf-scroll-affordance-visible {
  opacity: 1;
}

.nf-gantt-bar-selected .bar {
  filter: brightness(1.08);
  stroke: rgb(134 154 196 / 0.45);
  stroke-width: 1.2px;
}

.work-kanban-card.nf-kanban-error {
  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.45);
}

.work-kanban-dropzone.nf-kanban-drop-active {
  border-color: rgb(234 232 223 / 0.22);
  background-color: rgb(255 255 255 / 0.03);
}

.nf-upload-drag {
  border-color: rgb(134 154 196 / 0.35);
  background-color: rgb(134 154 196 / 0.04);
}

.nf-upload-uploading {
  opacity: 0.94;
}

.nf-ai-processing {
  opacity: 0.94;
}

.nf-ai-error {
  box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.35);
}

.nf-selection-emphasis {
  box-shadow: inset 0 0 0 1px rgb(134 154 196 / 0.22);
}

.nf-canvas-node-selected {
  box-shadow: 0 0 0 1px rgb(234 232 223 / 0.18);
}

html.nf-touch-surface .nf-motion-active {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nf-segment-indicator {
    transition: none;
  }
  .nf-item-updated,
  .nf-status-settle,
  .nf-save-error-emphasis,
  .nf-field-error-emphasis {
    transition: none;
  }
  .nf-scroll-affordance {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #global-profile-popover.surface-open,
  #global-profile-popover.surface-closing,
  #blockerModal.surface-open > .relative,
  #bugModal.surface-open .nf-entity-modal-panel,
  #task-detail-modal.surface-open .nf-entity-modal-panel,
  #createInitiativeModal.surface-open > .nf-platform-modal-panel,
  #createTaskModal.surface-open > .nf-platform-modal-panel,
  #global-confirm-modal.surface-open > .nf-platform-modal-panel,
  #health-breakdown-modal.surface-open > .nf-platform-modal-panel,
  .nf-modal-content-in,
  .nf-entity-modal-loading-spinner,
  .radix-select-content,
  #command-palette-panel,
  #command-palette-backdrop,
  #initiative-drawer-panel,
  #suggestion-drawer-panel,
  #call-drawer-panel,
  #initiative-drawer-backdrop,
  #suggestion-drawer-backdrop,
  #call-drawer-backdrop,
  .work-kanban-card,
  .work-kanban-dropzone {
    animation: none !important;
    transition: none !important;
  }

  .neurofy-dropzone-host .dz-preview {
    animation: none;
  }
}

@keyframes neurofySurfaceFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes neurofySurfaceFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes neurofyModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   5. Team / avatar multi-person picker
   ========================================================================== */

.multi-person-trigger .multi-person-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.multi-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 140px;
  padding: 0.15rem 0.45rem 0.15rem 0.15rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.multi-person-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.multi-person-chip-name {
  font-size: 11px;
  font-weight: 600;
  color: #edece8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-person-chip-more {
  font-size: 10px;
  font-weight: 700;
  color: #f0b4ff;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  border: 1px solid rgba(240, 180, 255, 0.25);
  background: rgba(240, 180, 255, 0.08);
}

.multi-person-option .multi-person-option-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.multi-person-option.is-selected .multi-person-option-avatar {
  box-shadow: 0 0 0 2px rgba(240, 180, 255, 0.35);
}

.multi-person-picker-container[data-work-toolbar-assignee="true"] {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.multi-person-picker-container[data-work-toolbar-assignee="true"] .multi-person-trigger {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 2.25rem;
}

.multi-person-picker-container[data-work-toolbar-assignee="true"] .work-toolbar-assignee-summary {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.work-toolbar-assignee-host {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

/* Work Operational Command Console (visual hierarchy only) */
/* Canonical filter / command rectangle (Work console + page filter stacks). */
.nf-filter-panel,
.work-command-console {
  --nf-filter-inset-x: 1.25rem;
  --nf-filter-inset-y: 0.875rem;
  --nf-filter-gap: 0.5rem;
  --nf-filter-row-gap: 0.625rem;
  /* Canonical Work "All impact levels" control width for every filter dropdown. */
  --nf-filter-control-width: 10.75rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #090a0c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 18px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.nf-filter-panel:not(.work-command-console) {
  padding: var(--nf-filter-inset-y) var(--nf-filter-inset-x);
}

.work-filter-visibility-control {
  margin-left: auto;
}

.work-command-panel--filters-collapsed .work-filter-visibility-control {
  margin-left: auto;
}

.work-command-panel--filters-collapsed [data-work-visual-filters-region],
.work-command-panel--filters-collapsed [data-work-visual-filters-toolbar] {
  display: none;
}

.work-command-panel--filters-collapsed [data-work-filters-collapsed-hint] {
  display: inline;
}

.work-command-panel--filters-collapsed [data-work-filters-chevron] {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: no-preference) {
  .work-command-panel--filters-collapsed [data-work-visual-filters-region],
  .work-command-panel--filters-collapsed [data-work-visual-filters-toolbar] {
    transition: opacity 0.12s ease;
  }
}

.work-command-band-label {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5e5d58;
  user-select: none;
  margin-bottom: 6px;
}

.work-command-band-label--inline {
  display: inline-block;
  margin-bottom: 0;
  flex-shrink: 0;
}

.work-command-band-label--row {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 640px) {
  .work-command-band-label--row {
    width: 3.25rem;
    margin-bottom: 0;
    padding-top: 0.55rem;
  }
}

.work-command-band--context {
  display: flex;
  flex-direction: column;
  gap: var(--nf-filter-gap, 0.5rem);
  padding: var(--nf-filter-inset-y, 0.75rem) var(--nf-filter-inset-x, 1rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 1024px) {
  .work-command-band--context {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

.work-context-rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.work-context-rail__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.work-command-scope {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.work-command-hairline {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.work-command-inline-select {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.work-command-inline-select:focus-within {
  border-color: rgba(255, 255, 255, 0.14);
}

.work-context-signals {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .work-context-signals {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding-top: 0;
    padding-left: 12px;
    margin-left: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    justify-content: flex-end;
  }
}

.work-context-signals__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

/* Canonical page filter composition (shared by Work + all list pages). */
.nf-filter-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nf-filter-row-gap, 0.625rem);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.nf-filter-bar,
.work-command-toolbar__filters,
.work-command-toolbar__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nf-filter-gap, 0.5rem);
  row-gap: var(--nf-filter-gap, 0.5rem);
  column-gap: var(--nf-filter-gap, 0.5rem);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Gap is the only horizontal rhythm - kill leftover margins on filter controls. */
.nf-filter-bar > *,
.work-command-toolbar__filters > *,
.work-command-toolbar__secondary > * {
  margin-left: 0;
  margin-right: 0;
}

.nf-filter-active-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  width: 100%;
}

.nf-filter-active-label {
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5e5d58;
  margin-right: 0.125rem;
  user-select: none;
  flex-shrink: 0;
}

.nf-filter-search {
  min-width: 0;
}

.nf-filter-search--grow {
  flex: 1 1 12rem;
  min-width: 12rem;
  max-width: 100%;
}

.nf-filter-search--fixed {
  flex: 0 1 14rem;
  min-width: 10rem;
  max-width: 16rem;
}

.nf-filter-date {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 12rem;
}

.work-command-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.work-command-toolbar-filters-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nf-filter-row-gap, 0.625rem);
  align-items: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.work-command-toolbar__filter-chip-host {
  display: contents;
}

.nf-filter-bar > .work-toolbar-assignee-host,
.nf-filter-bar > [data-work-toolbar-multiselect="true"],
.nf-filter-bar > [data-work-toolbar-assignee="true"],
.nf-filter-bar > [data-radix-select="true"],
.nf-filter-bar > [data-filter-control="true"],
.nf-filter-bar [data-work-toolbar-multiselect="true"],
.nf-filter-bar [data-work-toolbar-assignee="true"],
.work-command-toolbar__filters > .work-toolbar-assignee-host,
.work-command-toolbar__filters > [data-work-toolbar-multiselect="true"],
.work-command-toolbar__filters > [data-work-toolbar-assignee="true"],
.work-command-toolbar__filters [data-work-toolbar-multiselect="true"],
.work-command-toolbar__filters [data-work-toolbar-assignee="true"] {
  width: var(--nf-filter-control-width, 10.75rem) !important;
  min-width: var(--nf-filter-control-width, 10.75rem) !important;
  max-width: var(--nf-filter-control-width, 10.75rem) !important;
  flex: 0 0 var(--nf-filter-control-width, 10.75rem) !important;
  box-sizing: border-box;
  overflow: hidden;
}

.nf-filter-bar > .work-toolbar-assignee-host > [data-work-toolbar-assignee="true"],
.work-command-toolbar__filters > .work-toolbar-assignee-host > [data-work-toolbar-assignee="true"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

.nf-filter-bar > .nf-filter-date {
  width: var(--nf-filter-control-width, 10.75rem) !important;
  min-width: var(--nf-filter-control-width, 10.75rem) !important;
  max-width: var(--nf-filter-control-width, 10.75rem) !important;
  flex: 0 0 var(--nf-filter-control-width, 10.75rem) !important;
  box-sizing: border-box;
}

.nf-filter-bar [data-filter-kind="conditions"],
.work-command-toolbar__filters [data-filter-kind="conditions"] {
  width: var(--nf-filter-control-width, 10.75rem) !important;
  min-width: var(--nf-filter-control-width, 10.75rem) !important;
  max-width: var(--nf-filter-control-width, 10.75rem) !important;
  flex: 0 0 var(--nf-filter-control-width, 10.75rem) !important;
}

.nf-filter-bar .work-toolbar-multiselect-label,
.nf-filter-bar .work-toolbar-assignee-summary,
.nf-filter-bar .multi-person-value,
.nf-filter-bar .radix-select-trigger-label,
.work-command-toolbar__filters .work-toolbar-multiselect-label,
.work-command-toolbar__filters .work-toolbar-assignee-summary,
.work-command-toolbar__filters .multi-person-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

.nf-filter-bar > .work-command-timeframe,
.nf-filter-bar > #work-saved-views-root,
.work-command-toolbar__filters > .work-command-timeframe,
.work-command-toolbar__filters > #work-saved-views-root {
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
}

.nf-filter-bar > #work-toolbar-actions,
.nf-filter-bar > .nf-filter-actions,
.nf-filter-bar > .nf-filter-reset,
.nf-filter-bar > .nf-filter-toggle,
.work-command-toolbar__filters > #work-toolbar-actions {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  overflow: visible;
}

/* Keep page-level reset/actions flush-right; Work save/clear stay in the filter stream. */
.nf-filter-bar > .nf-filter-actions:not(#work-toolbar-actions),
.nf-filter-bar > .nf-filter-reset {
  margin-left: auto;
}

.nf-filter-bar > #work-toolbar-actions,
.work-command-toolbar__filters > #work-toolbar-actions {
  margin-left: 0;
}

#work-toolbar-actions,
.nf-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nf-filter-bar > .nf-segment-group,
.nf-filter-bar > .nf-filter-search--grow {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 767px) {
  .nf-filter-bar > .work-toolbar-assignee-host,
  .nf-filter-bar [data-work-toolbar-multiselect="true"],
  .nf-filter-bar [data-work-toolbar-assignee="true"],
  .nf-filter-bar > [data-radix-select="true"],
  .nf-filter-bar > .nf-filter-date,
  .nf-filter-bar [data-filter-kind="conditions"],
  .work-command-toolbar__filters > .work-toolbar-assignee-host,
  .work-command-toolbar__filters [data-work-toolbar-multiselect="true"],
  .work-command-toolbar__filters [data-work-toolbar-assignee="true"],
  .work-command-toolbar__filters [data-filter-kind="conditions"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 100%;
  }

  .nf-filter-search--grow,
  .nf-filter-search--fixed {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .nf-filter-date .nf-filter-date-input {
    max-width: 100%;
    width: 100%;
  }

  .work-command-toolbar__filters > #work-toolbar-actions,
  .nf-filter-bar > #work-toolbar-actions,
  .nf-filter-bar > .nf-filter-actions,
  .nf-filter-bar > .nf-filter-reset {
    margin-left: 0;
    width: auto;
    justify-content: flex-end;
  }
}

.work-command-toolbar .work-toolbar-multiselect .multi-person-trigger,
.nf-filter-bar .work-toolbar-multiselect .multi-person-trigger,
.nf-filter-bar .work-toolbar-assignee-host .multi-person-trigger,
.work-command-toolbar__filters .work-toolbar-assignee-host .multi-person-trigger {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  background: #070709;
  min-height: 2.25rem;
  padding: 0 0.625rem;
}

.nf-filter-bar [data-work-toolbar-multiselect="true"] .multi-person-trigger,
.nf-filter-bar [data-work-toolbar-assignee="true"] .multi-person-trigger,
.nf-filter-bar > .work-toolbar-assignee-host .multi-person-trigger,
.nf-filter-bar > [data-radix-select="true"] .radix-select-trigger,
.work-command-toolbar__filters [data-work-toolbar-multiselect="true"] .multi-person-trigger,
.work-command-toolbar__filters [data-work-toolbar-assignee="true"] .multi-person-trigger,
.work-command-toolbar__filters > .work-toolbar-assignee-host .multi-person-trigger {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Filter multiselect popovers: keep option rows compact (panel width is capped in radix_menu.js). */
.radix-menu-content[data-multi-person-dropdown] .multi-person-option,
.radix-menu-content.multi-person-dropdown .multi-person-option {
  min-width: 0;
}

.radix-menu-content[data-multi-person-dropdown] .multi-person-option-name,
.radix-menu-content.multi-person-dropdown .multi-person-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.work-command-band--filters {
  padding: var(--nf-filter-inset-y, 0.75rem) var(--nf-filter-inset-x, 1rem);
  box-sizing: border-box;
  min-width: 0;
}

.work-command-primary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work-command-primary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-command-primary__row--search {
  width: 100%;
}

.work-command-primary__row--classify {
  width: 100%;
  align-items: center;
}

.work-command-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-command-cluster--search-only {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.work-command-query__trail {
  flex: 0 0 auto;
}

.work-command-timeframe--query {
  max-width: 100%;
}

@media (max-width: 767px) {
  .work-command-query__bar-row {
    align-items: stretch;
  }

  .work-command-query__trail {
    width: 100%;
    justify-content: space-between;
  }
}

.work-command-cluster--search-time {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  align-items: center;
}

@media (min-width: 640px) {
  .work-command-primary__row--search {
    flex-wrap: nowrap;
  }

  .work-command-cluster--search-time {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.work-command-capsule [data-radix-select] > .radix-select-trigger,
.work-command-capsule .radix-select-trigger {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  height: 2.25rem;
  min-height: 2.25rem;
}

.work-command-capsule--flat-icon .radix-select-leading-icon {
  display: none !important;
}

.work-command-capsule--flat-icon .radix-select-trigger {
  padding-left: 0.625rem;
}

.work-command-query {
  margin-top: var(--nf-filter-row-gap, 0.625rem);
  padding-top: var(--nf-filter-row-gap, 0.625rem);
  border-top: 0;
}

.work-command-query__bar-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-items: stretch;
}

@media (min-width: 768px) {
  .work-command-query__bar-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}

.work-command-active-rules {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Legacy token strip: keep swap target in DOM but remove empty chrome. */
#work-active-tokens-container:not(:has(.work-command-active-rules > *)) {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  height: 0;
  overflow: hidden;
}

.work-command-panel--filters-collapsed .work-command-query {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 1024px) {
  .work-command-primary__row--classify {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .work-command-cluster--classify {
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }

  .work-command-cluster--actions {
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: nowrap;
  }
}

.work-command-save-view {
  margin-left: auto;
}

@media (max-width: 1023px) {
  .work-command-save-view {
    margin-left: 0;
  }

  .work-command-cluster--actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-command-console * {
    scroll-behavior: auto;
  }
}

/* Work filters popover + nested status picker */
.work-filters-popover {
  position: fixed;
  z-index: 11000;
  width: min(300px, calc(100vw - 24px));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0B0C0E;
  color: #EDECE8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: auto;
}

.work-filters-popover-inner {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-saved-view-option-active {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f3ee;
  font-weight: 600;
}

.work-saved-views-menu {
  z-index: 11000;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0B0C0E;
  color: #EDECE8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.12);
}

.work-filters-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A7974;
  margin-bottom: 6px;
  user-select: none;
}

.work-filter-multiselect-menu,
.work-status-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0A0B0E;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.work-filter-multiselect-options,
.work-status-picker-options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

.work-filter-multiselect-option,
.work-status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #C4C3BE;
  cursor: pointer;
  user-select: none;
}

.work-filter-multiselect-option:hover,
.work-status-option:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #F4F3EE;
}

.work-filter-multiselect-footer,
.work-status-picker-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.work-filter-multiselect-clear,
.work-status-picker-clear {
  font-size: 11px;
  color: #7A7974;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}

.work-filter-multiselect-clear:hover,
.work-status-picker-clear:hover {
  color: #EDECE8;
}

#work-filters-toggle-btn.is-open {
  background: rgba(255, 255, 255, 0.08);
  color: #F4F3EE;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.work-filters-flags-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* ==========================================================================
   HTMX loading indicators (AI panels, etc.)
   ========================================================================== */

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none !important;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* QA queue indicator: corner chip only, never covers rows, never captures clicks. */
#qa-review-queue-indicator,
.qa-review-queue-indicator {
  pointer-events: none !important;
  display: none !important;
}

#qa-review-queue.htmx-request > #qa-review-queue-indicator,
#qa-review-queue.qa-queue-refreshing > #qa-review-queue-indicator,
#qa-review-queue-indicator.htmx-request,
#qa-review-queue-indicator.qa-queue-indicator-active {
  display: inline-flex !important;
  opacity: 1;
  pointer-events: none !important;
}

/* ==========================================================================
   Drag-scroll surfaces (horizontal pan with mouse)
   ========================================================================== */

.drag-scroll-surface:not(.is-drag-scrolling) {
  cursor: grab;
}

.drag-scroll-surface.is-drag-scrolling {
  cursor: grabbing;
  user-select: none;
}

/* ==========================================================================
   Person pill (canonical inline person reference)
   ========================================================================== */

.person-pill {
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.person-pill--chip {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.person-pill--plain {
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
}

a.person-pill.person-profile-link {
  pointer-events: auto;
  cursor: pointer;
}

a.person-pill.person-profile-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

a.person-pill.person-profile-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.45);
}

/* Avatar-only triggers: keep the hover/focus ring circular (equal width and height). */
.person-avatar-interactive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9999px;
  line-height: 0;
  flex-shrink: 0;
  transition: box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.profile-popover-trigger.person-avatar-interactive:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.profile-popover-trigger.person-avatar-interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.45);
}

a.person-pill.person-pill--avatar-only {
  padding: 0;
  gap: 0;
  border-radius: 9999px;
  line-height: 0;
}

a.person-pill.person-pill--avatar-only:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.45);
}

.person-pill__name {
  font-weight: 500;
  color: #EDECE8;
}

.person-pill-fallback {
  color: #92918C;
}

.person-pill__avatar-host {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  line-height: 0;
}

.person-pill__avatar,
img.person-pill__avatar {
  border-radius: 9999px;
  overflow: hidden;
}

img.person-pill__avatar,
.person-pill__avatar-host > img {
  display: block;
}

.person-avatar-initials {
  background-image: none !important;
}

.person-avatar-stack {
  min-width: 0;
}

.person-avatar-stack__overflow {
  flex-shrink: 0;
}

.person-overlap-avatars {
  min-width: 0;
}

.person-overlap-avatars > .inline-flex {
  display: inline-flex;
  align-items: center;
}

.person-overlap-avatars__stack {
  display: inline-flex;
  align-items: center;
}

.person-overlap-avatars__stack > * + * {
  margin-left: -0.5rem;
}

.person-overlap-avatars__link {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.person-overlap-avatars__link:hover {
  transform: translateY(-1px);
  z-index: 20 !important;
}

.person-overlap-avatars__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(234, 232, 223, 0.35);
}

.person-overlap-avatars > .inline-flex > * + * {
  margin-left: -0.5rem;
}

.team-active-work-item--extra.hidden {
  display: none;
}

.team-active-work-toggle__chevron {
  transform: rotate(0deg);
}

.nf-details-chevron {
  transform: rotate(0deg);
}

.nf-details[open] > summary .nf-details-chevron {
  transform: rotate(180deg);
}

/* Profile grade badge: tiered living accents (junior < middle < senior) */
.profile-grade-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.65rem 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #EDECE8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  overflow: visible;
  isolation: isolate;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Account gamification level chip (sidebar + profile) */
.profile-level-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #EDECE8;
  border: 1px solid rgba(234, 232, 223, 0.18);
  background: rgba(234, 232, 223, 0.08);
  flex-shrink: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.profile-level-badge__prefix {
  text-transform: uppercase;
  color: #A8A69F;
  font-weight: 600;
}

.profile-level-badge__value {
  font-variant-numeric: tabular-nums;
  color: #F4F3EE;
}

/* Full-profile account XP progress meter */
.profile-account-xp-meter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.45rem 0.2rem 0.4rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  vertical-align: middle;
  max-width: 100%;
}

.profile-account-xp-meter__track {
  position: relative;
  width: 3.25rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.profile-account-xp-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #F0B4FF 0%, #EAE8DF 100%);
  transition: width 0.35s ease;
}

.profile-account-xp-meter__fill--pulse {
  animation: profile-account-xp-shimmer 1.8s ease-in-out infinite;
}

@keyframes profile-account-xp-shimmer {
  0%, 100% { filter: brightness(1); opacity: 0.92; }
  50% { filter: brightness(1.18); opacity: 1; }
}

.profile-account-xp-meter__label {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #C4C3BE;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.profile-account-xp-meter__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #8C8B86;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.profile-account-xp-meter__info:hover,
.profile-account-xp-meter__info:focus-visible {
  color: #EDECE8;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Gamification V2 profile presentation (Stage 5) */
.profile-achievement-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.profile-achievement-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 10.5rem;
  padding: 0.15rem 0.45rem 0.15rem 0.3rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #C4C3BE;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.profile-achievement-chip__mark {
  display: inline-flex;
  color: #C4B5A0;
  flex-shrink: 0;
}

.profile-achievement-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.profile-achievement-chip--more {
  max-width: none;
  color: #8C8B86;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.profile-achievement-chip--gold,
.profile-achievement-chip--platinum,
.profile-achievement-chip--obsidian,
.profile-achievement-chip--mythic {
  border-color: rgba(196, 181, 160, 0.28);
  background: rgba(196, 181, 160, 0.08);
}

.profile-track-progress {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .profile-track-progress {
    grid-template-columns: 1fr 1fr;
  }
}

.profile-track-progress__item {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.profile-track-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.profile-track-progress__label {
  font-size: 0.75rem;
  font-weight: 650;
  color: #EDECE8;
}

.profile-track-progress__meta {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #8C8B86;
  white-space: nowrap;
}

.profile-track-progress__track {
  position: relative;
  height: 0.35rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.profile-track-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8B9BB4 0%, #C4B5A0 100%);
}

.profile-track-progress__fill--complete {
  background: linear-gradient(90deg, #A8B89A 0%, #C4B5A0 100%);
}

.profile-track-progress__next {
  margin: 0.4rem 0 0;
  font-size: 10px;
  color: #7A7974;
  line-height: 1.35;
}

.profile-achievement-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .profile-achievement-gallery__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.profile-achievement-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.profile-achievement-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.55rem;
  background: rgba(196, 181, 160, 0.12);
  color: #C4B5A0;
  flex-shrink: 0;
}

.profile-achievement-card__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #EDECE8;
}

.profile-achievement-card__desc {
  margin: 0.2rem 0 0;
  font-size: 10px;
  line-height: 1.35;
  color: #8C8B86;
}

.profile-achievement-card__meta {
  margin: 0.35rem 0 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7A7974;
}

.profile-achievement-card--legacy {
  opacity: 0.92;
}

.profile-achievement-gallery__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: #7A7974;
  font-style: italic;
}

.profile-achievement-gallery__legacy {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-achievement-gallery__legacy-title {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: #C4C3BE;
}

.profile-gamification-section {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  padding: 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.profile-gamification-section__header {
  margin-bottom: 1rem;
}

.profile-gamification-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #F4F3EE;
}

.profile-gamification-section__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #8C8B86;
}

.profile-gamification-section__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.profile-gamification-section__block-title {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: #C4C3BE;
}

.profile-gamification-section__tracks {
  margin-bottom: 1.25rem;
}

.profile-grade-badge__label {
  position: relative;
  z-index: 2;
}

.profile-grade-badge__mark {
  position: relative;
  z-index: 2;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  opacity: 0.9;
  color: #EAE8DF;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(234, 232, 223, 0.35));
}

.profile-grade-badge__glow,
.profile-grade-badge__sparkles,
.profile-grade-badge__spark,
.profile-grade-badge__sheen {
  pointer-events: none;
}

.profile-grade-badge__glow {
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  z-index: 0;
  opacity: 0.55;
  filter: blur(14px);
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, #000 0%, #000 28%, transparent 70%);
  mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, #000 0%, #000 28%, transparent 70%);
}

.profile-grade-badge__sparkles {
  position: absolute;
  inset: -6px;
  z-index: 1;
}

.profile-grade-badge__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: #EAE8DF;
  box-shadow: 0 0 6px rgba(234, 232, 223, 0.85);
  opacity: 0;
}

.profile-grade-badge__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  overflow: hidden;
}

.profile-grade-badge__sheen::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 140%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(250, 249, 245, 0.08) 45%,
    rgba(250, 249, 245, 0.28) 50%,
    rgba(250, 249, 245, 0.08) 55%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-18deg);
}

/* Junior: soft breath + one quiet spark */
.profile-grade-badge--junior {
  background: rgba(240, 180, 255, 0.12);
  border-color: rgba(240, 180, 255, 0.32);
  color: #D5DCEB;
}

.profile-grade-badge--junior .profile-grade-badge__glow {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(240, 180, 255, 0.45) 0%,
    rgba(240, 180, 255, 0.18) 42%,
    transparent 74%
  );
}

.profile-grade-badge--junior .profile-grade-badge__spark:nth-child(1) {
  top: 10%;
  right: 12%;
  width: 2px;
  height: 2px;
  background: #F0B4FF;
  box-shadow: 0 0 5px rgba(240, 180, 255, 0.8);
}

/* Middle: shimmer border + a few orbiting sparks */
.profile-grade-badge--middle {
  background: linear-gradient(135deg, rgba(234, 232, 223, 0.08), rgba(240, 180, 255, 0.14));
  border-color: rgba(234, 232, 223, 0.22);
  color: #EAE8DF;
}

.profile-grade-badge--middle .profile-grade-badge__glow {
  background: radial-gradient(
    circle at 35% 40%,
    rgba(234, 232, 223, 0.32) 0%,
    rgba(240, 180, 255, 0.14) 45%,
    transparent 76%
  );
}

.profile-grade-badge--middle .profile-grade-badge__spark:nth-child(1) {
  top: 0%;
  left: 18%;
}
.profile-grade-badge--middle .profile-grade-badge__spark:nth-child(2) {
  bottom: 4%;
  right: 16%;
  width: 2px;
  height: 2px;
}
.profile-grade-badge--middle .profile-grade-badge__spark:nth-child(3) {
  top: 45%;
  right: -2%;
  width: 2.5px;
  height: 2.5px;
  background: #F0B4FF;
}

/* Senior: richest bloom, brand mark, denser sparkles, sheen */
.profile-grade-badge--senior {
  padding-left: 0.45rem;
  background:
    linear-gradient(135deg, rgba(250, 249, 245, 0.14), rgba(212, 175, 85, 0.12) 55%, rgba(240, 180, 255, 0.1));
  border-color: rgba(234, 232, 223, 0.38);
  color: #FAF9F5;
  box-shadow:
    0 0 0 1px rgba(234, 232, 223, 0.08),
    0 0 18px rgba(212, 175, 85, 0.18),
    inset 0 1px 0 rgba(250, 249, 245, 0.18);
}

.profile-grade-badge--senior .profile-grade-badge__glow {
  inset: -14px;
  opacity: 0.7;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 175, 85, 0.4) 0%, rgba(212, 175, 85, 0.12) 40%, transparent 72%),
    radial-gradient(circle at 78% 28%, rgba(250, 249, 245, 0.22) 0%, transparent 58%);
}

.profile-grade-badge--senior .profile-grade-badge__mark {
  opacity: 1;
  color: #F5E6B8;
}

.profile-grade-badge--senior .profile-grade-badge__spark:nth-child(1) {
  top: -2%;
  left: 22%;
}
.profile-grade-badge--senior .profile-grade-badge__spark:nth-child(2) {
  top: 8%;
  right: 10%;
  width: 2.5px;
  height: 2.5px;
  background: #D4AF55;
  box-shadow: 0 0 8px rgba(212, 175, 85, 0.95);
}
.profile-grade-badge--senior .profile-grade-badge__spark:nth-child(3) {
  bottom: -4%;
  left: 40%;
  width: 2px;
  height: 2px;
}
.profile-grade-badge--senior .profile-grade-badge__spark:nth-child(4) {
  bottom: 12%;
  right: 0%;
  width: 3px;
  height: 3px;
  background: #FAF9F5;
}
.profile-grade-badge--senior .profile-grade-badge__spark:nth-child(5) {
  top: 55%;
  left: -3%;
  width: 2px;
  height: 2px;
  background: #D4AF55;
  box-shadow: 0 0 7px rgba(212, 175, 85, 0.9);
}
.profile-grade-badge--senior .profile-grade-badge__spark:nth-child(6) {
  top: -6%;
  right: 36%;
  width: 2px;
  height: 2px;
}

/* Lead: same elite motion as senior, cooler platinum accents */
.profile-grade-badge--lead {
  padding-left: 0.45rem;
  background:
    linear-gradient(135deg, rgba(250, 249, 245, 0.16), rgba(240, 180, 255, 0.18) 50%, rgba(234, 232, 223, 0.1));
  border-color: rgba(178, 194, 226, 0.42);
  color: #FAF9F5;
  box-shadow:
    0 0 0 1px rgba(178, 194, 226, 0.1),
    0 0 18px rgba(240, 180, 255, 0.28),
    inset 0 1px 0 rgba(250, 249, 245, 0.2);
}

.profile-grade-badge--lead .profile-grade-badge__glow {
  inset: -14px;
  opacity: 0.72;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 180, 255, 0.42) 0%, rgba(240, 180, 255, 0.14) 42%, transparent 74%),
    radial-gradient(circle at 22% 30%, rgba(250, 249, 245, 0.2) 0%, transparent 55%);
}

.profile-grade-badge--lead .profile-grade-badge__mark {
  opacity: 1;
  color: #F8C8FF;
  filter: drop-shadow(0 0 5px rgba(178, 194, 226, 0.45));
}

.profile-grade-badge--lead .profile-grade-badge__spark:nth-child(1) {
  top: -2%;
  left: 22%;
}
.profile-grade-badge--lead .profile-grade-badge__spark:nth-child(2) {
  top: 8%;
  right: 10%;
  width: 2.5px;
  height: 2.5px;
  background: #F8C8FF;
  box-shadow: 0 0 8px rgba(178, 194, 226, 0.95);
}
.profile-grade-badge--lead .profile-grade-badge__spark:nth-child(3) {
  bottom: -4%;
  left: 40%;
  width: 2px;
  height: 2px;
}
.profile-grade-badge--lead .profile-grade-badge__spark:nth-child(4) {
  bottom: 12%;
  right: 0%;
  width: 3px;
  height: 3px;
  background: #FAF9F5;
}
.profile-grade-badge--lead .profile-grade-badge__spark:nth-child(5) {
  top: 55%;
  left: -3%;
  width: 2px;
  height: 2px;
  background: #F0B4FF;
  box-shadow: 0 0 7px rgba(240, 180, 255, 0.95);
}
.profile-grade-badge--lead .profile-grade-badge__spark:nth-child(6) {
  top: -6%;
  right: 36%;
  width: 2px;
  height: 2px;
  background: #F8C8FF;
}

/* Manager: elite motion with emerald/ivory accents */
.profile-grade-badge--manager {
  padding-left: 0.45rem;
  background:
    linear-gradient(135deg, rgba(250, 249, 245, 0.14), rgba(52, 211, 153, 0.12) 50%, rgba(240, 180, 255, 0.1));
  border-color: rgba(110, 231, 183, 0.38);
  color: #FAF9F5;
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.1),
    0 0 18px rgba(52, 211, 153, 0.22),
    inset 0 1px 0 rgba(250, 249, 245, 0.18);
}

.profile-grade-badge--manager .profile-grade-badge__glow {
  inset: -14px;
  opacity: 0.72;
  background:
    radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.38) 0%, rgba(52, 211, 153, 0.12) 42%, transparent 74%),
    radial-gradient(circle at 75% 25%, rgba(250, 249, 245, 0.18) 0%, transparent 55%);
}

.profile-grade-badge--manager .profile-grade-badge__mark {
  opacity: 1;
  color: #6EE7B7;
  filter: drop-shadow(0 0 5px rgba(110, 231, 183, 0.4));
}

.profile-grade-badge--manager .profile-grade-badge__spark:nth-child(1) {
  top: -2%;
  left: 22%;
}
.profile-grade-badge--manager .profile-grade-badge__spark:nth-child(2) {
  top: 8%;
  right: 10%;
  width: 2.5px;
  height: 2.5px;
  background: #6EE7B7;
  box-shadow: 0 0 8px rgba(110, 231, 183, 0.95);
}
.profile-grade-badge--manager .profile-grade-badge__spark:nth-child(3) {
  bottom: -4%;
  left: 40%;
  width: 2px;
  height: 2px;
}
.profile-grade-badge--manager .profile-grade-badge__spark:nth-child(4) {
  bottom: 12%;
  right: 0%;
  width: 3px;
  height: 3px;
  background: #FAF9F5;
}
.profile-grade-badge--manager .profile-grade-badge__spark:nth-child(5) {
  top: 55%;
  left: -3%;
  width: 2px;
  height: 2px;
  background: #34D399;
  box-shadow: 0 0 7px rgba(52, 211, 153, 0.95);
}
.profile-grade-badge--manager .profile-grade-badge__spark:nth-child(6) {
  top: -6%;
  right: 36%;
  width: 2px;
  height: 2px;
  background: #A7F3D0;
}

@media (prefers-reduced-motion: no-preference) {
  .profile-grade-badge--junior {
    animation: profile-grade-breath 3.6s ease-in-out infinite;
  }
  .profile-grade-badge--junior .profile-grade-badge__glow {
    animation: profile-grade-glow-soft 3.6s ease-in-out infinite;
  }
  .profile-grade-badge--junior .profile-grade-badge__spark:nth-child(1) {
    animation: profile-grade-twinkle 2.8s ease-in-out infinite;
  }

  .profile-grade-badge--middle {
    animation: profile-grade-breath 3.2s ease-in-out infinite;
  }
  .profile-grade-badge--middle .profile-grade-badge__glow {
    animation: profile-grade-glow-mid 3.2s ease-in-out infinite;
  }
  .profile-grade-badge--middle .profile-grade-badge__spark:nth-child(1) {
    animation: profile-grade-orbit-a 4.5s linear infinite, profile-grade-twinkle 2.2s ease-in-out infinite;
  }
  .profile-grade-badge--middle .profile-grade-badge__spark:nth-child(2) {
    animation: profile-grade-orbit-b 5.2s linear infinite, profile-grade-twinkle 2.6s ease-in-out 0.4s infinite;
  }
  .profile-grade-badge--middle .profile-grade-badge__spark:nth-child(3) {
    animation: profile-grade-twinkle 1.9s ease-in-out 0.8s infinite;
  }
  .profile-grade-badge--middle .profile-grade-badge__sheen::after {
    animation: profile-grade-sheen 5.5s ease-in-out infinite;
  }

  .profile-grade-badge--senior {
    animation: profile-grade-breath-senior 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__glow {
    animation: profile-grade-glow-senior 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__mark {
    animation: profile-grade-mark-pulse 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__sheen::after {
    animation: profile-grade-sheen 3.8s ease-in-out infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(1) {
    animation: profile-grade-orbit-a 3.8s linear infinite, profile-grade-twinkle 1.6s ease-in-out infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(2) {
    animation: profile-grade-orbit-b 4.4s linear infinite, profile-grade-twinkle 1.8s ease-in-out 0.2s infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(3) {
    animation: profile-grade-orbit-c 5s linear infinite, profile-grade-twinkle 1.7s ease-in-out 0.5s infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(4) {
    animation: profile-grade-twinkle 1.4s ease-in-out 0.3s infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(5) {
    animation: profile-grade-orbit-a 6s linear reverse infinite, profile-grade-twinkle 1.9s ease-in-out 0.7s infinite;
  }
  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(6) {
    animation: profile-grade-twinkle 1.5s ease-in-out 1s infinite;
  }

  .profile-grade-badge--lead {
    animation: profile-grade-breath-lead 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__glow {
    animation: profile-grade-glow-senior 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__mark {
    animation: profile-grade-mark-pulse-lead 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__sheen::after {
    animation: profile-grade-sheen 3.6s ease-in-out 0.4s infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(1) {
    animation: profile-grade-orbit-a 3.6s linear infinite, profile-grade-twinkle 1.5s ease-in-out infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(2) {
    animation: profile-grade-orbit-b 4.2s linear infinite, profile-grade-twinkle 1.7s ease-in-out 0.15s infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(3) {
    animation: profile-grade-orbit-c 4.8s linear infinite, profile-grade-twinkle 1.6s ease-in-out 0.4s infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(4) {
    animation: profile-grade-twinkle 1.35s ease-in-out 0.25s infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(5) {
    animation: profile-grade-orbit-a 5.6s linear reverse infinite, profile-grade-twinkle 1.8s ease-in-out 0.6s infinite;
  }
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(6) {
    animation: profile-grade-twinkle 1.45s ease-in-out 0.9s infinite;
  }

  .profile-grade-badge--manager {
    animation: profile-grade-breath-manager 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__glow {
    animation: profile-grade-glow-senior 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__mark {
    animation: profile-grade-mark-pulse-manager 2.8s ease-in-out infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__sheen::after {
    animation: profile-grade-sheen 3.7s ease-in-out 0.2s infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(1) {
    animation: profile-grade-orbit-a 3.7s linear infinite, profile-grade-twinkle 1.55s ease-in-out infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(2) {
    animation: profile-grade-orbit-b 4.3s linear infinite, profile-grade-twinkle 1.75s ease-in-out 0.2s infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(3) {
    animation: profile-grade-orbit-c 4.9s linear infinite, profile-grade-twinkle 1.65s ease-in-out 0.45s infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(4) {
    animation: profile-grade-twinkle 1.4s ease-in-out 0.3s infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(5) {
    animation: profile-grade-orbit-a 5.8s linear reverse infinite, profile-grade-twinkle 1.85s ease-in-out 0.65s infinite;
  }
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(6) {
    animation: profile-grade-twinkle 1.5s ease-in-out 0.95s infinite;
  }
}

@keyframes profile-grade-breath {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-0.5px); filter: brightness(1.06); }
}

@keyframes profile-grade-breath-senior {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(234, 232, 223, 0.06),
      0 0 14px rgba(212, 175, 85, 0.12),
      inset 0 1px 0 rgba(250, 249, 245, 0.14);
  }
  50% {
    transform: translateY(-0.5px) scale(1.01);
    filter: brightness(1.05);
    box-shadow:
      0 0 0 1px rgba(234, 232, 223, 0.1),
      0 0 20px rgba(212, 175, 85, 0.2),
      inset 0 1px 0 rgba(250, 249, 245, 0.22);
  }
}

@keyframes profile-grade-breath-lead {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(178, 194, 226, 0.08),
      0 0 14px rgba(240, 180, 255, 0.14),
      inset 0 1px 0 rgba(250, 249, 245, 0.16);
  }
  50% {
    transform: translateY(-0.5px) scale(1.01);
    filter: brightness(1.05);
    box-shadow:
      0 0 0 1px rgba(178, 194, 226, 0.12),
      0 0 20px rgba(240, 180, 255, 0.24),
      inset 0 1px 0 rgba(250, 249, 245, 0.24);
  }
}

@keyframes profile-grade-breath-manager {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(110, 231, 183, 0.08),
      0 0 14px rgba(52, 211, 153, 0.12),
      inset 0 1px 0 rgba(250, 249, 245, 0.14);
  }
  50% {
    transform: translateY(-0.5px) scale(1.01);
    filter: brightness(1.05);
    box-shadow:
      0 0 0 1px rgba(110, 231, 183, 0.12),
      0 0 20px rgba(52, 211, 153, 0.22),
      inset 0 1px 0 rgba(250, 249, 245, 0.22);
  }
}

@keyframes profile-grade-glow-soft {
  0%, 100% { opacity: 0.28; transform: scale(0.98); }
  50% { opacity: 0.55; transform: scale(1.03); }
}

@keyframes profile-grade-glow-mid {
  0%, 100% { opacity: 0.32; transform: scale(0.99); }
  50% { opacity: 0.62; transform: scale(1.04); }
}

@keyframes profile-grade-glow-senior {
  0%, 100% { opacity: 0.4; transform: scale(0.99); }
  50% { opacity: 0.72; transform: scale(1.05); }
}

@keyframes profile-grade-twinkle {
  0%, 100% { opacity: 0; }
  35% { opacity: 1; }
  55% { opacity: 0.4; }
}

@keyframes profile-grade-orbit-a {
  0% { transform: translate(0, 0); }
  25% { transform: translate(4px, -3px); }
  50% { transform: translate(7px, 1px); }
  75% { transform: translate(2px, 4px); }
  100% { transform: translate(0, 0); }
}

@keyframes profile-grade-orbit-b {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 3px); }
  50% { transform: translate(-6px, -1px); }
  75% { transform: translate(-1px, -4px); }
  100% { transform: translate(0, 0); }
}

@keyframes profile-grade-orbit-c {
  0% { transform: translate(0, 0); }
  33% { transform: translate(5px, 2px); }
  66% { transform: translate(-4px, 3px); }
  100% { transform: translate(0, 0); }
}

@keyframes profile-grade-sheen {
  0%, 55%, 100% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  60% { opacity: 1; }
  75% { transform: translateX(280%) skewX(-18deg); opacity: 0.9; }
}

@keyframes profile-grade-mark-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(234, 232, 223, 0.25));
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(212, 175, 85, 0.75));
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes profile-grade-mark-pulse-lead {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(178, 194, 226, 0.3));
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(240, 180, 255, 0.85));
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes profile-grade-mark-pulse-manager {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(110, 231, 183, 0.28));
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(52, 211, 153, 0.8));
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-grade-badge,
  .profile-grade-badge__glow,
  .profile-grade-badge__spark,
  .profile-grade-badge__mark,
  .profile-grade-badge__sheen::after {
    animation: none !important;
  }

  .profile-grade-badge__spark {
    opacity: 0.45;
  }

  .profile-grade-badge--senior .profile-grade-badge__spark:nth-child(n + 4),
  .profile-grade-badge--lead .profile-grade-badge__spark:nth-child(n + 4),
  .profile-grade-badge--manager .profile-grade-badge__spark:nth-child(n + 4) {
    opacity: 0.55;
  }
}
/* ==========================================================================
   Overview Command Center — precision layout system
   ========================================================================== */

.overview-command-center {
  --ov-pad-x: 1rem;
  --ov-pad-y: 0.625rem;
  --ov-gap: 0.75rem;
  --ov-radius: 0.75rem;
  --ov-border: rgba(255, 255, 255, 0.075);
  --ov-divider: rgba(255, 255, 255, 0.055);
  --ov-row-line: rgba(255, 255, 255, 0.04);
  --ov-head-h: 2.5rem;
  --ov-pulse-h: 4.5rem;
  --ov-icon: 0.75rem;
  --ov-ease: 150ms ease;
  --ov-row-min-h: 2.75rem;
  --ov-expand-toggle-h: 2.25rem;
  --ov-trio-collapsed-rows: 5;
  /* ~6 list rows at min-height 2.75rem */
  --ov-list-max-h: 16.5rem;
}

.overview-command-center .ov-surface {
  display: flex;
  flex-direction: column;
  border-radius: var(--ov-radius);
  border: 1px solid var(--ov-border);
  background: #0b0c0e;
  min-width: 0;
  overflow: hidden;
}

.overview-command-center .ov-preview-trio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .overview-command-center .ov-preview-trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .overview-command-center .ov-preview-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.overview-command-center .ov-preview-trio > .ov-surface {
  min-height: 11.5rem;
}

.overview-command-center .ov-preview-trio .ov-row-list {
  flex: 1 1 auto;
  min-height: 0;
}

/* Trio widgets: collapsed = clip preview rows; expanded = scroll long lists */
.overview-command-center .ov-preview-trio .ov-row-list[data-overview-expand-root]:not([data-overview-expanded="1"]) {
  max-height: calc(
    var(--ov-row-min-h) * var(--ov-trio-collapsed-rows) + var(--ov-expand-toggle-h)
  );
  overflow: hidden !important;
}

.overview-command-center .ov-preview-trio .ov-row-list[data-overview-expand-root][data-overview-expanded="1"] {
  max-height: var(--ov-list-max-h);
  overflow-x: hidden;
  overflow-y: auto !important;
}

.overview-command-center .ov-surface__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--ov-head-h);
  min-height: var(--ov-head-h);
  max-height: var(--ov-head-h);
  padding: 0 var(--ov-pad-x);
  border-bottom: 1px solid var(--ov-divider);
  box-sizing: border-box;
}

.overview-command-center .ov-surface__head > .flex {
  min-width: 0;
}

.overview-command-center .ov-surface__footer {
  padding: 0.5rem var(--ov-pad-x);
  border-top: 1px solid var(--ov-divider);
  box-sizing: border-box;
}

/* ---- Project Pulse rail ---- */
.overview-command-center .ov-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

@media (min-width: 640px) {
  .overview-command-center .ov-pulse-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .overview-command-center .ov-pulse-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.overview-command-center .ov-pulse-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: var(--ov-pulse-h);
  min-height: var(--ov-pulse-h);
  max-height: var(--ov-pulse-h);
  padding: 0.75rem 1.75rem 0.75rem 1rem;
  min-width: 0;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--ov-ease), color var(--ov-ease);
}

.overview-command-center .ov-pulse-cell--attention {
  background: rgba(244, 63, 94, 0.035);
}

.overview-command-center .ov-pulse-cell__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  height: 1rem;
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5d58;
}

.overview-command-center .ov-pulse-cell__label i {
  width: var(--ov-icon);
  height: var(--ov-icon);
  flex-shrink: 0;
}

.overview-command-center .ov-pulse-cell--attention .ov-pulse-cell__label,
.overview-command-center .ov-pulse-cell--attention .ov-pulse-cell__label i {
  color: rgba(251, 113, 133, 0.85);
}

.overview-command-center .ov-pulse-cell__value {
  margin-top: 0.5rem;
  height: 1.375rem;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: 1.375rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #f4f3ee;
}

.overview-command-center .ov-pulse-cell--attention .ov-pulse-cell__value {
  color: #fda4af;
}

.overview-command-center .ov-pulse-cell__affordance {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: var(--ov-icon);
  height: var(--ov-icon);
  color: #5e5d58;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ov-ease), color var(--ov-ease);
}

.overview-command-center .ov-pulse-cell:hover,
.overview-command-center .ov-pulse-cell:focus-visible {
  background: rgba(255, 255, 255, 0.032);
  outline: none;
  z-index: 1;
}

.overview-command-center .ov-pulse-cell:hover .ov-pulse-cell__label,
.overview-command-center .ov-pulse-cell:focus-visible .ov-pulse-cell__label {
  color: #92918c;
}

.overview-command-center .ov-pulse-cell:hover .ov-pulse-cell__value,
.overview-command-center .ov-pulse-cell:focus-visible .ov-pulse-cell__value {
  color: #faf9f5;
}

.overview-command-center .ov-pulse-cell:hover .ov-pulse-cell__affordance,
.overview-command-center .ov-pulse-cell:focus-visible .ov-pulse-cell__affordance {
  opacity: 1;
  color: #c4c3be;
}

.overview-command-center .ov-pulse-cell:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(234, 232, 223, 0.28);
}

.overview-command-center .ov-pulse-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  font-size: 0.6875rem;
  line-height: 1;
  color: #5e5d58;
}

.overview-command-center .ov-pulse-meta .font-mono {
  font-variant-numeric: tabular-nums;
}

/* ---- Rows ---- */
.overview-command-center .ov-row-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--ov-list-max-h);
  overflow-x: hidden;
  /* !important: FormKit AutoAnimate sets inline overflow:hidden and breaks wheel scroll */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  -webkit-overflow-scrolling: touch;
}

.overview-command-center .ov-row {
  position: relative;
  box-sizing: border-box;
  min-height: 2.75rem;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--ov-ease);
}

.overview-command-center .ov-row:hover,
.overview-command-center .ov-row:focus-visible {
  background: rgba(255, 255, 255, 0.028);
  outline: none;
}

.overview-command-center .ov-row:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(234, 232, 223, 0.22);
}

.overview-command-center .ov-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.overview-command-center .ov-row__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.125rem;
}

.overview-command-center .ov-row__title {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #f4f3ee;
  transition: color var(--ov-ease);
}

.overview-command-center .ov-row:hover .ov-row__title,
.overview-command-center .ov-row:focus-visible .ov-row__title {
  color: #faf9f5;
}

.overview-command-center .ov-row__sub {
  font-size: 0.6875rem;
  line-height: 1rem;
  color: #5e5d58;
}

.overview-command-center .ov-row__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  flex-shrink: 0;
  min-width: 4.5rem;
  font-size: 0.6875rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #5e5d58;
  transition: color var(--ov-ease);
}

.overview-command-center .ov-row:hover .ov-row__meta,
.overview-command-center .ov-row:focus-visible .ov-row__meta {
  color: #92918c;
}

.overview-command-center .ov-row__type-icon {
  width: var(--ov-icon);
  height: var(--ov-icon);
  color: #5e5d58;
  flex-shrink: 0;
  transition: color var(--ov-ease);
}

.overview-command-center .ov-row:hover .ov-row__type-icon,
.overview-command-center .ov-row:focus-visible .ov-row__type-icon {
  color: #c4c3be;
}

.overview-command-center .ov-row__affordance {
  width: var(--ov-icon);
  height: var(--ov-icon);
  color: #5e5d58;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--ov-ease), color var(--ov-ease);
}

.overview-command-center .ov-row:hover .ov-row__affordance,
.overview-command-center .ov-row:focus-visible .ov-row__affordance,
.overview-command-center .ov-row:focus-within .ov-row__affordance {
  opacity: 1;
  color: #c4c3be;
}

.overview-command-center .ov-row--activity .ov-activity-action {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #edece8;
  transition: color var(--ov-ease);
}

.overview-command-center .ov-row--activity:hover .ov-activity-action,
.overview-command-center .ov-row--activity:focus-within .ov-activity-action {
  color: #faf9f5;
}

.overview-command-center .ov-row--qa .font-mono,
.overview-command-center .ov-row--content .ov-content-status {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.overview-command-center .ov-progress {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #090a0c;
  overflow: hidden;
}

.overview-command-center .ov-progress__bar {
  display: block;
  height: 100%;
  background: rgba(234, 232, 223, 0.55);
  transition: width 180ms ease;
}

.overview-command-center .ov-row--initiative:hover .ov-init-progress-label,
.overview-command-center .ov-row--initiative:focus-visible .ov-init-progress-label {
  color: #c4c3be;
}

.overview-command-center .ov-expand-toggle {
  width: 100%;
  height: 2.25rem;
  padding: 0 var(--ov-pad-x);
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1;
  color: #92918c;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ov-row-line);
  cursor: pointer;
  transition: color var(--ov-ease), background-color var(--ov-ease);
}

.overview-command-center .ov-expand-toggle:hover,
.overview-command-center .ov-expand-toggle:focus-visible {
  color: #edece8;
  background: rgba(255, 255, 255, 0.02);
  outline: none;
}

.overview-command-center .ov-empty-compact {
  padding: 0.875rem var(--ov-pad-x);
}

.overview-command-center .ov-footer-link {
  font-size: 0.6875rem;
  line-height: 1;
  color: #92918c;
  text-decoration: none;
  transition: color var(--ov-ease);
}

.overview-command-center .ov-footer-link:hover,
.overview-command-center .ov-footer-link:focus-visible {
  color: #edece8;
  outline: none;
}

.overview-command-center .ov-avatar-stack {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
}

.overview-command-center .ov-avatar-stack__item {
  margin-left: -0.35rem;
  line-height: 0;
}

.overview-command-center .ov-avatar-stack__item:first-child {
  margin-left: 0;
}

.overview-command-center .ov-inline-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
  color: #92918c;
}

.overview-command-center .ov-inline-metric .font-mono {
  font-variant-numeric: tabular-nums;
  color: #edece8;
}

.overview-command-center .ov-status-rail {
  display: flex;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: #090a0c;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.overview-command-center .ov-status-rail__seg {
  min-width: 0;
  height: 100%;
  background: rgba(146, 145, 140, 0.45);
}

.overview-command-center .ov-status-rail__seg--published,
.overview-command-center .ov-status-rail__seg--analytics {
  background: rgba(52, 211, 153, 0.7);
}

.overview-command-center .ov-status-rail__seg--scheduled,
.overview-command-center .ov-status-rail__seg--in_review,
.overview-command-center .ov-status-rail__seg--review,
.overview-command-center .ov-status-rail__seg--editing,
.overview-command-center .ov-status-rail__seg--recording {
  background: rgba(251, 191, 36, 0.65);
}

.overview-command-center .ov-status-rail__seg--idea,
.overview-command-center .ov-status-rail__seg--draft,
.overview-command-center .ov-status-rail__seg--backlog,
.overview-command-center .ov-status-rail__seg--hypothesis_selected {
  background: rgba(134, 154, 196, 0.65);
}

.overview-command-center .ov-status-rail__seg--archived {
  background: rgba(94, 93, 88, 0.7);
}

.overview-command-center .ov-status-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: rgba(146, 145, 140, 0.7);
  flex-shrink: 0;
}

.overview-command-center .ov-status-dot--published,
.overview-command-center .ov-status-dot--analytics { background: rgba(52, 211, 153, 0.85); }
.overview-command-center .ov-status-dot--scheduled,
.overview-command-center .ov-status-dot--in_review,
.overview-command-center .ov-status-dot--review,
.overview-command-center .ov-status-dot--editing { background: rgba(251, 191, 36, 0.85); }
.overview-command-center .ov-status-dot--idea,
.overview-command-center .ov-status-dot--draft,
.overview-command-center .ov-status-dot--backlog { background: rgba(134, 154, 196, 0.85); }

.overview-command-center .ov-overdue-pill {
  display: inline-flex;
  align-items: center;
  height: 1rem;
  padding: 0 0.35rem;
  font-size: 0.625rem;
  line-height: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: #fda4af;
  border-radius: 0.25rem;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.18);
}

.overview-command-center .ov-content-meta-extra {
  display: none;
  margin-top: 0.125rem;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.625rem;
  line-height: 1;
  color: #5e5d58;
}

.overview-command-center .ov-row--content:hover .ov-content-meta-extra,
.overview-command-center .ov-row--content:focus-visible .ov-content-meta-extra {
  display: flex;
}

.overview-command-center .ov-row--content:hover .ov-content-status,
.overview-command-center .ov-row--content:focus-visible .ov-content-status {
  color: #c4c3be;
}

.overview-command-center .ov-content-meta-extra span + span::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: #5e5d58;
}

.overview-command-center .ov-row--initiative .ov-progress {
  margin-top: 0.375rem;
}

.overview-command-center .ov-context > div {
  min-height: var(--ov-head-h);
  align-items: center;
}

.overview-command-center .ov-suggestions > div:first-child {
  padding-top: var(--ov-pad-y);
  padding-bottom: var(--ov-pad-y);
  align-items: center;
}

/* Tippy detail popovers */
.ov-pop {
  padding: 0.125rem 0.05rem;
  max-width: 16.5rem;
  text-align: left;
}

.ov-pop__title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: #f4f3ee;
}

.ov-pop__desc {
  margin-top: 0.3rem;
  font-size: 0.625rem;
  line-height: 1.4;
  color: #5e5d58;
}

.ov-pop__period {
  margin-top: 0.2rem;
  font-size: 0.625rem;
  line-height: 1;
  font-family: var(--font-mono);
  color: #7a7974;
}

.ov-pop__hint {
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.625rem;
  line-height: 1;
  color: #5e5d58;
}

.ov-pop__title + .ov-pop__stats {
  margin-top: 0.45rem;
}

.ov-pop__stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
}

.ov-pop__stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 1rem;
  font-size: 0.6875rem;
  line-height: 1;
  color: #c4c3be;
}

.ov-pop__stats li span:last-child {
  color: #edece8;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ov-pop__entities {
  margin: 0.45rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  list-style: none;
  padding: 0.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ov-pop__entity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #edece8;
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.ov-pop__entity:hover,
.ov-pop__entity:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.ov-pop__entity-meta {
  font-size: 0.625rem;
  line-height: 1;
  color: #5e5d58;
}

.ov-pop__footer {
  display: block;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  font-size: 0.6875rem;
  line-height: 1;
  color: #92918c;
  text-decoration: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease;
}

.ov-pop__footer:hover,
.ov-pop__footer:focus-visible {
  color: #edece8;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .overview-command-center .ov-pulse-cell,
  .overview-command-center .ov-pulse-cell__affordance,
  .overview-command-center .ov-row,
  .overview-command-center .ov-row__affordance,
  .overview-command-center .ov-row__title,
  .overview-command-center .ov-row__meta,
  .overview-command-center .ov-row__type-icon,
  .overview-command-center .ov-progress__bar,
  .overview-command-center .ov-expand-toggle,
  .ov-pop__entity,
  .ov-pop__footer {
    transition: none !important;
  }
}

@media (hover: none) {
  .overview-command-center .ov-pulse-cell__affordance,
  .overview-command-center .ov-row__affordance {
    opacity: 0.55;
  }

  .overview-command-center .ov-content-meta-extra {
    display: flex;
  }
}

/* ==========================================================================
   Stage 1 geometry: Work Grouped scroll containment
   Shared horizontal scroll for header + rows; card keeps overflow:hidden chrome.
   ========================================================================== */

.work-group-rows-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Canonical list chrome for Initiatives surfaces: same Work group card +
   row-grid density. Legacy HTML table helpers kept for residual shells. */
.nf-canonical-work-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.nf-canonical-work-table thead tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: #7a7974;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(11, 12, 14, 0.9);
}
.nf-canonical-work-table thead th {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}
.nf-canonical-work-table tbody {
  border-color: rgba(255, 255, 255, 0.055);
}
.nf-canonical-work-table tbody tr {
  transition: background-color 120ms ease;
}
.nf-canonical-work-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}
.nf-canonical-work-table tbody td {
  padding: 0.625rem 0.75rem;
  font-size: 12px;
  vertical-align: middle;
}
.nf-canonical-work-shell {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(11, 12, 14, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.nf-canonical-work-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(11, 12, 14, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.nf-canonical-work-group-header {
  min-height: 48px;
  padding: 0.625rem 1rem;
  background: rgba(16, 17, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.initiative-list-row-grid {
  grid-template-columns:
    minmax(4.75rem, 5.5rem)
    minmax(9rem, 1.5fr)
    minmax(5.75rem, 7.25rem)
    minmax(8rem, 11.5rem)
    minmax(4.5rem, 5.75rem)
    minmax(5.25rem, 0.9fr)
    2.5rem;
  min-width: 0;
  width: 100%;
  align-items: center;
  justify-items: start;
  text-align: left;
}

.nf-initiative-list-row.initiative-list-row-grid {
  align-items: start;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.nf-initiative-list-row.initiative-list-row-grid > .initiative-list-cell--middle {
  align-self: center;
}

.nf-initiative-list-row .person-pill__name {
  white-space: normal;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nf-initiative-list .work-group-rows-scroll {
  overflow-x: visible;
}

.initiative-history-row-grid {
  grid-template-columns: 5.25rem minmax(12rem, 1.4fr) 9rem 8rem 11rem 7rem;
  min-width: 48rem;
  align-items: center;
  justify-items: start;
  text-align: left;
}

.work-row-grid--with-initiative {
  /* Title floor 12rem so narrow viewports scroll instead of collapsing the title.
     QA send-count track (no header) sits before Status; Status stays 8rem.
     Priority track is 8.5rem so compact/kind min-widths cannot bleed into Assignee. */
  grid-template-columns: 5.25rem minmax(12rem, 1fr) 2.25rem 8rem 8.5rem 11rem 9rem 7rem;
  /* Fixed tracks + title floor + gaps + px-4 */
  min-width: 70.25rem;
}

.work-row-grid--no-initiative {
  grid-template-columns: 5.25rem minmax(12rem, 1fr) 2.25rem 8rem 8.5rem 11rem 7rem;
  min-width: 60.5rem;
}

.work-row-grid--no-initiative.work-row-grid--with-actions {
  grid-template-columns: 6.5rem minmax(12rem, 1fr) 2.25rem 8rem 8.5rem 11rem 7rem 2.5rem;
  min-width: 64.25rem;
}

.work-row-grid--with-initiative.work-row-grid--with-actions {
  grid-template-columns: 6.5rem minmax(12rem, 1fr) 2.25rem 8rem 8.5rem 11rem 9rem 7rem 2.5rem;
  min-width: 74rem;
}

/* Shared Work / QA list alignment: columns left-edge aligned horizontally;
   cells vertically centered so Status / Priority / Assignee / Due stay mid-row
   when titles wrap. Multi-assignee stacks center as one block (no wrap change). */
.work-row-grid,
.qa-row-grid {
  align-items: center;
  justify-items: start;
  text-align: left;
}

.work-row-grid > *,
.qa-row-grid > * {
  min-width: 0;
  justify-self: stretch;
  text-align: left;
}

/* Full title in Work / QA list rows: wrap in-column; long tokens cannot blow the grid. */
.work-item-row .work-item-title {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.work-row-grid [data-work-priority-cell],
.work-row-grid [data-work-assignee-cell] {
  overflow: hidden;
}

.work-row-grid [data-work-status-control],
.work-row-grid [data-work-priority-control],
.work-row-grid [data-radix-width="compact"],
.work-row-grid [data-radix-select-kind="priority"] {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.work-row-grid .radix-select-trigger {
  overflow: hidden;
}

/* ==========================================================================
   QA Review queue: shared header/row grid (Work-aligned geometry)
   Marker classes pair with qa/partials/column_header.html. Do not rely on
   Tailwind arbitrary md:grid-cols-[...] for this surface - those classes are
   brittle across rebuilds and crush without a shared scroll host.
   ========================================================================== */

.qa-review-rows-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.qa-row-grid {
  /* Type | Title | QA reviewer | Waiting | Actions */
  grid-template-columns: 5.5rem minmax(14rem, 1fr) 13rem 5.5rem 10rem;
  /* Fixed floors + gaps (4 * 0.75rem) + px-4 */
  min-width: 52rem;
}

.qa-row-grid [data-qa-reviewer-cell],
.qa-row-grid [data-qa-actions-cell] {
  overflow: hidden;
}

.qa-row-grid [data-qa-reviewer-cell] [data-radix-select],
.qa-row-grid [data-qa-reviewer-cell] .radix-select-trigger {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Stage 1 geometry: Profile / Team popovers viewport clamp
   ========================================================================== */

.nf-profile-popover,
.nf-team-profile-popover {
  display: none;
  box-sizing: border-box;
  width: min(420px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  flex-direction: column;
}

.nf-team-profile-popover {
  width: min(380px, calc(100vw - 2rem));
}

.nf-profile-popover:not(.hidden),
.nf-team-profile-popover:not(.hidden) {
  display: flex;
}

.nf-profile-popover-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.nf-profile-popover-hero {
  flex-shrink: 0;
  overflow: visible;
}

.nf-profile-popover-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.team-popover-avatar-stack {
  overflow: visible;
  padding-right: 0.25rem;
}

.team-popover-avatar-stack__item {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px #0e1013;
}

.team-popover-avatar-stack__item + .team-popover-avatar-stack__item {
  margin-left: -0.375rem;
}

#global-team-profile-popover .team-popover-avatar-stack .person-pill__avatar-host,
#global-team-profile-popover #team-popover-members-list .person-pill__avatar-host {
  overflow: visible;
}

#popover-avatar-container img.person-pill__avatar,
#popover-avatar-container img[data-avatar-image] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.multi-person-chip-avatar {
  overflow: hidden;
}

.multi-person-chip-avatar .person-pill__avatar-host {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.multi-person-chip-avatar img.person-pill__avatar,
.multi-person-chip-avatar .person-pill__avatar.person-avatar-initials {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.overview-command-center .ov-row--person .person-pill--chip,
.overview-command-center .ov-row--team .team-pill.person-pill--chip {
  opacity: 1;
  visibility: visible;
}

a.team-pill.team-profile-link {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

a.team-pill.team-profile-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Stage 1 geometry: Initiative drawer width
   Full-bleed below lg; side panel only when viewport can host ~44vw content.
   ========================================================================== */

.nf-initiative-drawer-panel {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .nf-initiative-drawer-panel {
    width: min(44vw, 52rem);
    max-width: min(44vw, 52rem);
  }
}

/* ==========================================================================
   Stage 1 geometry: Roadmap shell inside #app-main (no second 100vh)
   Lock the app flex column to the viewport so header takes natural height
   and #roadmap-root receives the remaining space.
   ========================================================================== */

body:has(#app-main .roadmap-shell) {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
}

body:has(#app-main .roadmap-shell) > .min-h-screen {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#app-main:has(.roadmap-shell) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  max-height: 100%;
}

#app-main:has(.roadmap-shell) > #roadmap-page-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#app-main:has(.roadmap-shell) .roadmap-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Sheet shell viewport containment inside #app-main
   Lock flex column to viewport so chrome takes natural height
   and .nf-sheet-viewport receives remaining space with internal scrolling only.
   ========================================================================== */

body:has(#app-main .nf-doc-shell--sheet),
body.nf-sheet-mode-active {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
}

body:has(#app-main .nf-doc-shell--sheet) > .min-h-screen,
body.nf-sheet-mode-active > .min-h-screen {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#app-main:has(.nf-doc-shell--sheet),
body.nf-sheet-mode-active #app-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  max-height: 100%;
}

#app-main:has(.nf-doc-shell--sheet) > .nf-doc-shell--sheet,
body.nf-sheet-mode-active .nf-doc-shell--sheet {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  contain: layout size;
}

.nf-doc-shell--sheet .nf-doc-shell__body {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
}

.nf-doc-shell--sheet .nf-doc-shell__canvas,
.nf-doc-shell--sheet .nf-doc-shell__canvas-body--sheet,
.nf-doc-shell--sheet .nf-sheet-canvas,
.nf-doc-shell--sheet .nf-sheet-workspace {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nf-doc-shell--sheet .nf-sheet-viewport {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  position: relative;
  contain: strict;
}

body:has(#app-main .nf-doc-shell--flowchart),
body.nf-flowchart-mode-active {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
}

body:has(#app-main .nf-doc-shell--flowchart) > .min-h-screen,
body.nf-flowchart-mode-active > .min-h-screen {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#app-main:has(.nf-doc-shell--flowchart),
body.nf-flowchart-mode-active #app-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  max-height: 100%;
}

#app-main:has(.nf-doc-shell--flowchart) > .nf-doc-shell--flowchart,
body.nf-flowchart-mode-active .nf-doc-shell--flowchart {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  contain: layout size;
}

.nf-doc-shell--flowchart .nf-doc-shell__body {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
}

.nf-doc-shell--flowchart .nf-doc-shell__canvas,
.nf-doc-shell--flowchart .nf-doc-shell__canvas-body--flowchart,
.nf-doc-shell--flowchart .nf-flowchart-canvas,
.nf-doc-shell--flowchart .nf-flowchart-workspace,
.nf-doc-shell--flowchart .nf-flowchart-root {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.roadmap-shell .roadmap-header,
#app-main .roadmap-header {
  flex-shrink: 0;
}

#roadmap-root {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Canonical Speed Dial (Material-style floating create cluster)
   z-index 60: above page chrome, below radio (67+) and entity overlays (70+)
   ========================================================================== */

.nf-speed-dial {
  --nf-sd-fab-size: 52px;
  --nf-sd-action-size: 42px;
  --nf-sd-gap: 0.7rem;
  --nf-sd-right: calc(1.25rem + env(safe-area-inset-right, 0px));
  --nf-sd-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  position: fixed;
  right: var(--nf-sd-right);
  bottom: var(--nf-sd-bottom);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--nf-sd-gap);
  pointer-events: none;
}

.nf-speed-dial > * {
  pointer-events: auto;
}

.nf-speed-dial__fab {
  position: relative;
  width: var(--nf-sd-fab-size);
  height: var(--nf-sd-fab-size);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #EAE8DF;
  color: #070709;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  flex-shrink: 0;
}

.nf-speed-dial__fab:hover {
  background: #F4F3EE;
}

.nf-speed-dial__fab:active {
  transform: scale(0.97);
}

.nf-speed-dial__fab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(234, 232, 223, 0.4),
    0 0 0 3px #070709,
    0 10px 28px rgba(0, 0, 0, 0.42);
}

.nf-speed-dial__fab-icon {
  width: 1.35rem;
  height: 1.35rem;
  position: absolute;
  transition: opacity 140ms ease, transform 160ms ease;
}

.nf-speed-dial__fab-icon--plus {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.nf-speed-dial__fab-icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.85);
}

.nf-speed-dial.is-open .nf-speed-dial__fab-icon--plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.85);
}

.nf-speed-dial.is-open .nf-speed-dial__fab-icon--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.nf-speed-dial__actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--nf-sd-gap);
  margin: 0;
  padding: 0;
}

.nf-speed-dial__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(0.55rem) scale(0.92);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0ms;
}

.nf-speed-dial.is-open .nf-speed-dial__action {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: calc(var(--nf-sd-i, 0) * 28ms);
}

.nf-speed-dial__action-btn {
  width: var(--nf-sd-action-size);
  height: var(--nf-sd-action-size);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #15161A;
  color: #EDECE8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.nf-speed-dial__action-btn:hover {
  background: #1A1B20;
  border-color: rgba(255, 255, 255, 0.16);
}

.nf-speed-dial__action-btn:active {
  transform: scale(0.96);
}

.nf-speed-dial__action-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(234, 232, 223, 0.35),
    0 0 0 3px #070709,
    0 8px 20px rgba(0, 0, 0, 0.38);
}

.nf-speed-dial__action-icon {
  width: 1.1rem;
  height: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .nf-speed-dial__fab,
  .nf-speed-dial__fab-icon,
  .nf-speed-dial__action,
  .nf-speed-dial__action-btn {
    transition: none !important;
  }

  .nf-speed-dial__action {
    transform: none;
  }
}

.nf-speed-dial.nf-speed-dial--reduced-motion .nf-speed-dial__fab,
.nf-speed-dial.nf-speed-dial--reduced-motion .nf-speed-dial__fab-icon,
.nf-speed-dial.nf-speed-dial--reduced-motion .nf-speed-dial__action,
.nf-speed-dial.nf-speed-dial--reduced-motion .nf-speed-dial__action-btn {
  transition: none !important;
}

/* Stay under blocking entity overlays (do not remain clickable / visually on top). */
body:has(#task-detail-modal:not(.hidden)) .nf-speed-dial,
body:has(#bugModal:not(.hidden)) .nf-speed-dial,
body:has(#blockerModal:not(.hidden)) .nf-speed-dial,
body:has(#initiative-drawer:not(.hidden)) .nf-speed-dial,
body:has(#suggestion-drawer:not(.hidden)) .nf-speed-dial,
body:has(#call-drawer:not(.hidden)) .nf-speed-dial {
  visibility: hidden;
  pointer-events: none;
}

/* Avoid overlap when Radio is docked bottom-right. */
body:has(#radio-compact-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial,
body:has(#radio-full-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial,
body:has(#radio-composer-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial,
body:has(.radio-composer-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial {
  --nf-sd-right: calc(1.25rem + env(safe-area-inset-right, 0px) + min(100vw - 2rem, 25rem) + 0.75rem);
}

@media (max-width: 767px) {
  body:has(#radio-compact-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial,
  body:has(#radio-full-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial,
  body:has(#radio-composer-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial,
  body:has(.radio-composer-panel.radio-dock-bottom-right:not(.hidden)) .nf-speed-dial {
    --nf-sd-right: calc(1.25rem + env(safe-area-inset-right, 0px));
    --nf-sd-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + 5.5rem);
  }
}

/* Neurofy sheet engine interaction styles (appended into ui-patterns.css) */

.nf-doc-shell[data-canvas-mode="sheet"].is-panel-open .nf-doc-shell__panel {
  width: 15rem;
}

.nf-doc-shell__canvas-body--rich .nf-doc-shell-editor,
.nf-doc-shell__canvas-body--rich .neurofy-tiptap-editor {
  border-radius: 0.75rem;
}

.nf-doc-shell__section-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nf-sheet-formula-bar__ref {
  min-width: 2.75rem;
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.nf-sheet-sizer {
  position: relative;
  pointer-events: none;
}

.nf-sheet-layer,
.nf-sheet-grid-layer,
.nf-sheet-text-layer,
.nf-sheet-object-layer,
.nf-sheet-selection-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.nf-sheet-text-layer {
  z-index: 2;
}

.nf-sheet-object-layer {
  z-index: 4;
  pointer-events: none;
}

.nf-sheet-chart {
  position: absolute;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 16, 20, 0.92);
  border-radius: 6px;
  overflow: hidden;
}

.nf-sheet-note-mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-top: 6px solid #eab308;
}

.nf-sheet-validation-mark {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #8c8b86;
}

.nf-sheet-text {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  color: #edece8;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: none;
}

.nf-sheet-text[data-wrap="wrap"] {
  white-space: pre-wrap;
  word-break: break-word;
  align-items: flex-start;
}

.nf-sheet-resize-guide {
  position: absolute;
  pointer-events: none;
  z-index: 12;
  background: rgba(240, 180, 255, 0.92);
}

.nf-sheet-viewport.is-col-resize,
.nf-sheet-viewport.is-col-resize .nf-sheet-col-head {
  cursor: col-resize;
}

.nf-sheet-viewport.is-row-resize,
.nf-sheet-viewport.is-row-resize .nf-sheet-row-head {
  cursor: row-resize;
}

.nf-sheet-corner,
.nf-sheet-col-head,
.nf-sheet-row-head,
.nf-sheet-td {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.6875rem;
  font-weight: 500;
  color: #8c8b86;
  background: #0b0c0e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-sheet-corner {
  z-index: 7;
  cursor: pointer;
}

.nf-sheet-corner::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-top: 5px solid #5e5d58;
  margin-left: auto;
  margin-top: auto;
  margin-right: 3px;
  margin-bottom: 3px;
}

.nf-sheet-col-head {
  z-index: 5;
  cursor: pointer;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.nf-sheet-row-head {
  z-index: 5;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.nf-sheet-col-head.is-active,
.nf-sheet-row-head.is-active,
.nf-sheet-corner.is-active {
  color: #f4f3ee;
  background: #15161a;
}

.nf-sheet-td {
  z-index: 1;
  justify-content: flex-start;
  padding: 0 0.4rem;
  color: #edece8;
  font-size: 0.8125rem;
  font-weight: 400;
  background: #090a0c;
  cursor: cell;
}

.nf-sheet-td.is-selected {
  background: rgba(240, 180, 255, 0.08);
}

.nf-sheet-td.is-active {
  background: rgba(240, 180, 255, 0.12);
}

.nf-sheet-td.is-frozen,
.nf-sheet-col-head.is-frozen,
.nf-sheet-row-head.is-frozen {
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
}

.nf-sheet-active-outline {
  position: absolute;
  pointer-events: none;
  z-index: 8;
  box-sizing: border-box;
  border: 2px solid rgba(240, 180, 255, 0.88);
  box-shadow: 0 0 0 1px rgba(9, 10, 12, 0.85), inset 0 0 0 1px rgba(240, 180, 255, 0.2);
}

.nf-sheet-range-outline {
  position: absolute;
  pointer-events: none;
  z-index: 7;
  box-sizing: border-box;
  border: 1px solid rgba(240, 180, 255, 0.55);
  background: rgba(240, 180, 255, 0.04);
}

.nf-sheet-formula-bar__input {
  resize: none;
  min-height: 1.5rem;
  max-height: 6rem;
  overflow-y: auto;
}

.nf-sheet-cell-editor {
  resize: none;
  white-space: pre-wrap;
  line-height: 1.35;
  padding: 0.2rem 0.4rem;
  position: absolute;
  z-index: 9;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.4rem;
  border: 2px solid rgba(240, 180, 255, 0.85);
  border-radius: 2px;
  background: #101114;
  color: #f4f3ee;
  font-size: 0.8125rem;
  outline: none;
  pointer-events: auto;
}

.nf-sheet-cell-editor.hidden {
  display: none !important;
}

.nf-sheet-context-menu {
  min-width: 13rem;
  padding: 0.25rem;
  background: #101114 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 13000;
}

.nf-sheet-context-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.nf-sheet-context-sep {
  height: 1px;
  margin: 0.25rem 0.4rem;
  background: rgba(255, 255, 255, 0.08);
}

.nf-sheet-grid-overlay {
  display: none;
}

/* Documents UX: monolithic DocumentWorkspace under Neurofy panel token */

.nf-doc-shell__canvas-body--rich,
.nf-doc-stage {
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.5rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  background: var(--nf-doc-workspace-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.nf-doc-workspace {
  min-height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  background: transparent;
}

.nf-doc-page {
  width: min(100%, 51.5rem);
  display: flex;
  flex-direction: column;
  min-height: min(82vh, 900px);
  background: var(--th-card, #101114);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: none;
}

.nf-doc-page__title-row {
  display: none;
}

.nf-doc-page__body {
  flex: 1;
  min-height: 0;
  padding: 0;
}

.nf-doc-editor-chrome.neurofy-editor-wrapper,
.nf-doc-page-editor.neurofy-editor-wrapper {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

.nf-doc-shell__toolbar-strip .nf-doc-editor-toolbar,
.nf-doc-editor-toolbar {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0.15rem 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  gap: 0.1rem;
  width: 100%;
  flex-wrap: nowrap;
}

.nf-doc-toolbar-style {
  height: 1.85rem;
  min-width: 8.25rem;
  padding: 0 0.55rem;
  margin: 0 0.1rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #edece8;
  font-size: 0.75rem;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.nf-doc-toolbar-style:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.16);
}

.nf-doc-editor-toolbar .neurofy-toolbar-btn {
  min-width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.4rem;
  color: #c4c3bd;
}

.nf-doc-editor-toolbar .neurofy-toolbar-btn:hover:not(:disabled):not(.is-tool-disabled) {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.07);
}

.nf-doc-editor-toolbar .neurofy-toolbar-btn.is-active:not(:disabled):not(.is-tool-disabled) {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.1);
}

.nf-doc-shell__toolbar-strip.is-interaction-locked .neurofy-toolbar-btn,
.nf-doc-shell__toolbar-strip.is-interaction-locked .nf-doc-toolbar-style,
.nf-doc-editor-toolbar .neurofy-toolbar-btn.is-tool-disabled,
.nf-doc-editor-toolbar .nf-doc-toolbar-style:disabled,
.nf-doc-shell__title-input.is-interaction-locked,
.nf-doc-shell__section-rail .is-interaction-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.nf-doc-shell__toolbar-strip.is-interaction-locked .neurofy-toolbar-btn:hover,
.nf-doc-editor-toolbar .neurofy-toolbar-btn.is-tool-disabled:hover {
  color: inherit;
  background: transparent;
}

.nf-doc-toolbar-sep {
  background: rgba(255, 255, 255, 0.1) !important;
  height: 1.25rem !important;
  margin: 0 0.25rem !important;
}

.nf-doc-prose,
.nf-doc-editor-chrome .tiptap.ProseMirror,
.nf-doc-shell-editor .tiptap.ProseMirror,
.nf-doc-page .neurofy-tiptap-readonly {
  min-height: min(70vh, 760px) !important;
  padding: 3rem 4.25rem 4rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #e8e7e2 !important;
  font-family: Inter, "Segoe UI", Arial, "Noto Sans", system-ui, sans-serif !important;
  font-size: 11pt !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  caret-color: #9ec1ff;
}

.nf-doc-prose:focus,
.nf-doc-editor-chrome .tiptap.ProseMirror:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.nf-doc-prose p,
.nf-doc-page .tiptap p {
  margin: 0 0 0.65em;
}

.nf-doc-prose h1,
.nf-doc-page .tiptap h1 {
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 1.15em 0 0.45em;
  color: #f4f3ee;
}

.nf-doc-prose h2,
.nf-doc-page .tiptap h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 1.05em 0 0.4em;
  color: #f4f3ee;
}

.nf-doc-prose h3,
.nf-doc-page .tiptap h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0.95em 0 0.35em;
  color: #edece8;
}

.nf-doc-prose ul,
.nf-doc-prose ol,
.nf-doc-page .tiptap ul,
.nf-doc-page .tiptap ol {
  padding-left: 1.6rem;
  margin: 0 0 0.65em;
}

.nf-doc-prose li + li,
.nf-doc-page .tiptap li + li {
  margin-top: 0.15em;
}

.nf-doc-prose blockquote,
.nf-doc-page .tiptap blockquote {
  margin: 0.85em 0;
  padding: 0.2rem 0 0.2rem 0.95rem;
  border-left: 3px solid rgba(158, 193, 255, 0.45);
  color: #b0afa9;
  font-style: normal;
  background: transparent;
}

.nf-doc-prose code,
.nf-doc-page .tiptap code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em;
  letter-spacing: 0;
  padding: 0.08em 0.3em;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
}

.nf-doc-prose ::selection,
.nf-doc-page .tiptap ::selection {
  background: rgba(125, 167, 255, 0.35);
  color: #f4f3ee;
}

.nf-doc-prose p.is-editor-empty:first-child::before,
.nf-doc-page .tiptap p.is-editor-empty:first-child::before {
  color: #6e6d68;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
}

.nf-doc-shell__panel {
  background: var(--nf-doc-workspace-bg);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  width: 16.5rem;
}

.nf-doc-shell.is-panel-open .nf-doc-shell__panel-toggle {
  color: #f4f3ee;
  background: rgba(255, 255, 255, 0.08);
}

.nf-sheet-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.2rem;
  row-gap: 0.25rem;
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--nf-doc-workspace-bg, var(--th-panel, #0B0C0E));
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 6;
}

.nf-sheet-tool-group {
  display: contents;
}

.nf-sheet-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.85rem;
  padding: 0 0.45rem;
  border-radius: 0.45rem;
  border: 1px solid transparent;
  background: transparent;
  color: #8c8b86;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
}

.nf-sheet-tool-btn:hover:not(:disabled) {
  color: #edece8;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.nf-sheet-tool-btn.is-active {
  color: #f4f3ee;
  background: rgba(240, 180, 255, 0.12);
  border-color: rgba(240, 180, 255, 0.28);
}

.nf-sheet-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nf-sheet-popover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nf-sheet-tool-btn--dropdown {
  padding: 0 0.35rem 0 0.45rem;
  gap: 0.2rem;
}

.nf-sheet-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.nf-sheet-tool-chevron {
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nf-sheet-popover-wrap.is-open .nf-sheet-tool-chevron {
  transform: rotate(180deg);
}

.nf-sheet-popover-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--th-panel, #0B0C0E);
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.1));
  border-radius: 0.45rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.15);
}

.nf-sheet-popover-menu.hidden {
  display: none;
}

.nf-sheet-popover-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.35rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--th-text-secondary, #8C8B86);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.nf-sheet-popover-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--th-text-primary, #EDECE8);
}

.nf-sheet-popover-item.is-active {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.35);
}

.nf-sheet-tool-fx {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
}

.nf-sheet-tool-select-wrap {
  display: inline-flex;
  align-items: center;
}

.nf-sheet-tool-select {
  height: 1.85rem;
  max-width: 7.5rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #101114;
  color: #edece8;
  font-size: 0.75rem;
}

.nf-sheet-tool-select-wrap--narrow .nf-sheet-tool-select {
  max-width: 4.5rem;
}

.nf-sheet-color-swatches {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0 0.15rem;
}

.nf-sheet-color-swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--swatch, #edece8);
  padding: 0;
  cursor: pointer;
}

.nf-sheet-color-swatch--fill {
  border-radius: 0.2rem;
}

.nf-sheet-tool-sep {
  width: 1px;
  height: 1.1rem;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0.2rem;
  flex-shrink: 0;
}

.nf-sheet-formula-bar {
  min-height: 2.35rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.nf-sheet-formula-bar__input {
  height: 1.95rem;
}

.nf-sheet-save-status {
  margin-left: 0.5rem;
}

.nf-sheet-tabs {
  min-height: 2.15rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.nf-sheet-tab.is-active {
  border-bottom: 2px solid rgba(240, 180, 255, 0.55);
}

.nf-sheet-tab[draggable='true'] {
  cursor: grab;
}

@media (max-width: 900px) {
  .nf-doc-page__title-row,
  .nf-doc-prose,
  .nf-doc-editor-chrome .tiptap.ProseMirror,
  .nf-doc-shell-editor .tiptap.ProseMirror {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .nf-doc-editor-toolbar {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}

/* Platform & TipTap context menus (RadixMenu openAt + composition) */
.nf-platform-context-menu.radix-menu-content,
.nf-platform-context-menu.radix-select-content,
.nf-editor-context-menu.radix-menu-content,
.nf-editor-context-menu.radix-select-content {
  min-width: 15.5rem;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.075));
  background: var(--th-panel, #0B0C0E);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.12);
}

.nf-platform-context-menu .radix-select-viewport,
.nf-platform-context-menu[data-radix-menu-content],
.nf-editor-context-menu .radix-select-viewport,
.nf-editor-context-menu[data-radix-menu-content] {
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

.nf-editor-context-sep {
  height: 1px;
  margin: 0.3rem 0.4rem;
  background: var(--th-border-subtle, rgba(255, 255, 255, 0.055));
}

.nf-editor-context-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--th-text-primary, #EDECE8);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.nf-editor-context-item:hover:not([aria-disabled="true"]),
.nf-editor-context-item.highlighted:not([aria-disabled="true"]),
.nf-editor-context-item[data-highlighted="true"]:not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.065);
  color: #F4F3EE;
}

.nf-editor-context-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--th-text-secondary, #92918C);
}

.nf-editor-context-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--th-text-secondary, #92918C);
}

.nf-editor-context-item:hover:not([aria-disabled="true"]) .nf-editor-context-item__icon,
.nf-editor-context-item.highlighted:not([aria-disabled="true"]) .nf-editor-context-item__icon {
  color: #EDECE8;
}

.nf-editor-context-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-editor-context-item__hint {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--th-text-tertiary, #5E5D58);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.nf-editor-context-item__chevron {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--th-text-tertiary, #5E5D58);
}

.nf-editor-context-submenu {
  min-width: 12.5rem;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.075));
  background: var(--th-panel, #0B0C0E);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 12001;
}

.nf-context-menu__bypass-hint {
  padding: 0.35rem 0.55rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--th-text-tertiary, #5E5D58);
  user-select: none;
  pointer-events: none;
  border-top: 1px solid var(--th-border-subtle, rgba(255, 255, 255, 0.04));
  margin-top: 0.25rem;
}

/* Context Markers: pin indicator, target outline highlight, composer, card */
.nf-context-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 35;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.nf-context-pin-mark {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  background: #14151B;
  border: 1px solid rgba(99, 102, 241, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 1px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.nf-context-pin:hover .nf-context-pin-mark,
.nf-context-pin:focus-visible .nf-context-pin-mark {
  transform: scale(1.18);
  border-color: #818CF8;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8), 0 0 8px rgba(99, 102, 241, 0.6);
}

.nf-context-pin-preview {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 13rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.5rem;
  background: rgba(14, 15, 19, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 45;
}

.nf-context-pin:hover .nf-context-pin-preview,
.nf-context-pin:focus-visible .nf-context-pin-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

.nf-marker-target-highlight {
  outline: 2px dashed rgba(99, 102, 241, 0.75) !important;
  outline-offset: 2px !important;
  transition: outline 0.2s ease;
}

.nf-marker-composer {
  min-width: 18rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--th-panel, #0B0C0E);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.15);
}

.nf-marker-card {
  min-width: 19rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--th-panel, #0B0C0E);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.15);
}

.nf-context-pin-resolved {
  display: none;
}

.nf-context-pins-hidden .nf-context-pin:not(.nf-context-pin-forced) {
  display: none !important;
}

.nf-context-pin-forced {
  display: block !important;
  z-index: 50 !important;
}

.nf-context-pin-forced .nf-context-pin-mark {
  border-color: #A5B4FC !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.45) !important;
}

.nf-marker-editor,
.nf-marker-reply-editor {
  min-height: 4.5rem;
  max-height: 12rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}

.nf-marker-reply-editor {
  min-height: 2.75rem;
  max-height: 8rem;
}

.nf-marker-editor:empty:before,
.nf-marker-reply-editor:empty:before {
  content: attr(data-placeholder);
  color: #706E68;
  pointer-events: none;
}

.nf-marker-editor .mention-chip,
.nf-marker-reply-editor .mention-chip {
  cursor: default;
  vertical-align: middle;
  margin: 0 1.5px;
  user-select: none;
  -webkit-user-select: none;
}

.nf-context-markers-panel {
  width: min(22rem, calc(100vw - 2rem));
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--th-panel, #0B0C0E);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.nf-table-size-picker {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem 0.55rem;
  min-width: 11.5rem;
}

.nf-table-size-picker__grid {
  display: grid;
  grid-template-columns: repeat(10, 1.05rem);
  grid-template-rows: repeat(8, 1.05rem);
  gap: 0.2rem;
}

.nf-table-size-picker__cell {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.nf-table-size-picker__cell.is-active {
  border-color: rgba(158, 193, 255, 0.85);
  background: rgba(158, 193, 255, 0.16);
}

.nf-table-size-picker__label {
  text-align: center;
  color: var(--th-text-secondary, #92918C);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.nf-table-custom-size,
.nf-doc-create-tab {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem 0.65rem;
  min-width: 14rem;
}

.nf-table-custom-size.hidden {
  display: none !important;
}

.nf-table-custom-size__field,
.nf-doc-create-tab__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--th-text-secondary, #92918C);
  font-size: 0.6875rem;
  font-weight: 500;
}

.nf-table-custom-size__field input,
.nf-doc-create-tab__input {
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.075));
  background: var(--th-surface-inset, #090A0C);
  color: var(--th-text-primary, #EDECE8);
  padding: 0 0.55rem;
  font-size: 0.8125rem;
}

.nf-table-custom-size__actions,
.nf-doc-create-tab__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.nf-table-custom-size__btn {
  height: 1.85rem;
  padding: 0 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.075));
  background: transparent;
  color: var(--th-text-secondary, #92918C);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.nf-table-custom-size__btn:hover {
  color: #F4F3EE;
  background: rgba(255, 255, 255, 0.05);
}

.nf-table-custom-size__btn--primary {
  background: #EAE8DF;
  color: #070709;
  border-color: transparent;
}

.nf-table-custom-size__btn--primary:hover {
  background: #F4F3EE;
  color: #070709;
}

.nf-doc-shell__section-radix-menu,
.nf-doc-shell__section-radix-menu.radix-menu-content,
.nf-doc-shell__section-radix-menu.radix-select-content {
  min-width: 11.5rem;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.075));
  background: var(--th-panel, #0B0C0E);
  background-color: var(--th-panel, #0B0C0E);
  color: var(--th-text-primary, #EDECE8);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 12000;
  isolation: isolate;
  overflow: hidden;
  pointer-events: auto;
  box-sizing: border-box;
}

.nf-doc-create-tab-menu.radix-menu-content,
.nf-doc-create-tab-menu.radix-select-content,
.nf-doc-rename-tab-menu.radix-menu-content,
.nf-doc-rename-tab-menu.radix-select-content {
  min-width: 16rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--th-border-default, rgba(255, 255, 255, 0.075));
  background: var(--th-panel, #0B0C0E);
  background-color: var(--th-panel, #0B0C0E);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 12000;
  isolation: isolate;
}

.nf-doc-outline-list:empty + [data-nf-doc-outline-empty],
[data-nf-doc-outline-empty]:not(.hidden) {
  display: block;
}

[data-nf-doc-outline-empty].hidden {
  display: none !important;
}

.nf-doc-outline-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--th-text-primary, #EDECE8);
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

.nf-doc-outline-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.nf-doc-outline-item--h1 {
  font-weight: 600;
}

.nf-doc-outline-item--h2 {
  padding-left: 0.85rem;
  color: #c4c3bd;
}

.nf-doc-outline-item--h3 {
  padding-left: 1.25rem;
  color: #92918c;
}

/* Channels room workspace (Obsidian; Discord-inspired composition). */
.nf-channels-workspace {
  min-width: 0;
}

.nf-channels-workspace-body {
  min-height: min(70vh, 42rem);
}

.nf-channels-tiles-grid {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  align-content: stretch;
}

.nf-channels-tiles-grid.nf-channels-tiles-strip {
  flex: 0 0 auto;
  max-height: 9.5rem;
  grid-auto-rows: 8rem;
  overflow-x: auto;
  overflow-y: hidden;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important;
}

.nf-channels-tile.is-speaking {
  border-color: rgba(52, 211, 153, 0.85);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.55),
    0 0 18px rgba(16, 185, 129, 0.25);
}

.nf-channels-tile.is-speaking [data-tile-avatar-ring],
.nf-channels-tile [data-tile-avatar-ring].is-speaking,
[data-stage-share-focus] [data-tile-avatar-ring].is-speaking {
  border-color: rgba(52, 211, 153, 0.95);
  box-shadow:
    0 0 0 2px rgba(52, 211, 153, 0.85),
    0 0 14px rgba(16, 185, 129, 0.45);
}

.nf-channels-tile.is-focused-tile {
  border-color: rgba(234, 232, 223, 0.35);
  box-shadow: 0 0 0 1px rgba(234, 232, 223, 0.22);
}

[data-stage-share-focus].is-speaking {
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
}

.nf-channels-share-tile:hover .nf-channels-share-tile__overlay {
  background: rgba(0, 0, 0, 0.48);
}

.nf-channel-context-menu,
.nf-channel-context-submenu {
  min-width: 14rem;
  max-width: 17.5rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: #131519;
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

.nf-context-menu-header {
  padding: 0.35rem 0.55rem 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #8c8b86;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.2rem;
}

.nf-context-menu-profile {
  padding: 0.2rem 0.25rem 0.3rem;
}

.nf-context-menu-profile__pill {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.2rem 0.3rem;
  border-radius: 0.65rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.nf-context-menu-profile__pill:hover,
.nf-context-menu-profile__pill:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.nf-context-menu-profile__pill .person-pill {
  pointer-events: none;
  max-width: 100%;
}

.nf-context-menu-caption {
  padding: 0.25rem 0.55rem;
  font-size: 0.65rem;
  color: #8c8b86;
}

.nf-context-menu-check {
  font-size: 0.75rem;
  font-weight: 700;
  color: #34d399;
}

.nf-context-menu-checkbox {
  cursor: pointer;
  user-select: none;
}

.nf-context-menu-checkbox__input {
  width: 0.95rem;
  height: 0.95rem;
  accent-color: #34d399;
  cursor: pointer;
}

.nf-context-menu-volume {
  padding: 0.4rem 0.55rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nf-context-menu-volume__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #c4c3be;
}

.nf-context-menu-volume__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #f4f3ee;
}

.nf-context-menu-volume__slider {
  width: 100%;
  accent-color: #eae8df;
  cursor: pointer;
}

.nf-context-menu-volume__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  line-height: 1;
  color: #5e5d58;
  padding: 0 0.1rem;
}

.nf-channels-rail [data-rail-participant].is-speaking {
  background: rgba(16, 185, 129, 0.08);
  color: #d1fae5;
}

.nf-channels-rail [data-rail-on-air]:not(.hidden) {
  color: #fda4af;
}

.nf-channels-rail [data-rail-participant] [data-rail-avatar] {
  display: inline-flex;
  min-width: 0;
  border-radius: 9999px;
  transition: box-shadow 140ms ease;
}

.nf-channels-rail [data-rail-participant].is-speaking [data-person-avatar-host],
.nf-channels-rail [data-rail-participant].is-speaking .person-pill__avatar-host,
.nf-channels-rail [data-rail-participant] [data-person-avatar-host].is-speaking,
.nf-channels-rail [data-rail-participant] .person-pill__avatar-host.is-speaking {
  box-shadow:
    0 0 0 2px rgba(52, 211, 153, 0.92),
    0 0 8px rgba(16, 185, 129, 0.45);
  border-radius: 9999px;
}

/* Channels stage fullscreen: whole room media workspace (header/media/controls),
   not a lone video element or the app shell. */
.nf-channels-stage:fullscreen,
.nf-channels-stage:-webkit-full-screen,
.nf-channels-stage.nf-channels-stage--fullscreen {
  background: #090A0C;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nf-channels-stage:fullscreen > .relative,
.nf-channels-stage:-webkit-full-screen > .relative,
.nf-channels-stage.nf-channels-stage--fullscreen > .relative {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.nf-channels-stage:fullscreen [data-stage-media],
.nf-channels-stage:-webkit-full-screen [data-stage-media],
.nf-channels-stage.nf-channels-stage--fullscreen [data-stage-media] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.nf-channels-stage:fullscreen [data-stage-share-focus],
.nf-channels-stage:-webkit-full-screen [data-stage-share-focus],
.nf-channels-stage.nf-channels-stage--fullscreen [data-stage-share-focus],
.nf-channels-stage:fullscreen .nf-channels-stage-focus,
.nf-channels-stage:-webkit-full-screen .nf-channels-stage-focus {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
}

.nf-channels-stage:fullscreen [data-share-focus-host],
.nf-channels-stage:-webkit-full-screen [data-share-focus-host],
.nf-channels-stage:fullscreen [data-focus-avatar-stage],
.nf-channels-stage:-webkit-full-screen [data-focus-avatar-stage],
.nf-channels-stage-focus:fullscreen [data-share-focus-host],
.nf-channels-stage-focus:-webkit-full-screen [data-share-focus-host],
.nf-channels-stage-focus:fullscreen [data-focus-avatar-stage],
.nf-channels-stage-focus:-webkit-full-screen [data-focus-avatar-stage] {
  min-height: 100%;
  height: 100%;
}

.nf-channels-stage:fullscreen [data-stage-controls],
.nf-channels-stage:-webkit-full-screen [data-stage-controls],
.nf-channels-stage.nf-channels-stage--fullscreen [data-stage-controls],
.nf-channels-stage:fullscreen > footer,
.nf-channels-stage:-webkit-full-screen > footer {
  flex: 0 0 auto;
  z-index: 5;
}

/* Legacy focus-only fullscreen target (compat). */
.nf-channels-stage-focus:fullscreen,
.nf-channels-stage-focus:-webkit-full-screen {
  background: #0b0c0f;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  width: 100%;
  height: 100%;
}

.nf-channels-ctrl.is-active-off {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fecdd3;
}

.nf-channels-ctrl.is-active-on {
  background: rgba(234, 232, 223, 0.14);
  border-color: rgba(234, 232, 223, 0.35);
  color: #f4f3ee;
}

@media (max-width: 1023px) {
  .nf-channels-workspace-body {
    position: relative;
  }

  .nf-channels-rail {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(16.5rem, 86vw);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }

  .nf-channels-workspace.nf-channels-rail-collapsed .nf-channels-rail {
    display: none;
  }
}