/* graph.css — WKR-GRAPH — Knowledge Graph operator depth
   Lead-wired lane file (2.76.85 fold). Owned by the WKR-GRAPH seat.
   Scope every rule under #module-knowledgegraph or a .kg-* / .graph-* class.
   Motion 150–250 ms eased transform/opacity only; honour prefers-reduced-motion.
   Tokens: consume WKR-SHELL --motion-* / --ease-* / --elev-* when present;
   Fluent/Carbon/Primer fallbacks from LEAD-OSS-SCOUT-20260908 §C. */

#module-knowledgegraph {
  --kg-motion-fast: var(--motion-fast, 150ms);
  --kg-motion-base: var(--motion-base, 200ms);
  --kg-motion-slow: var(--motion-slow, 250ms);
  --kg-ease: var(--ease-standard, cubic-bezier(0.2, 0, 0.38, 0.9));
  --kg-elev-2: var(--elev-2, 0 1px 1px rgba(26, 26, 26, 0.10), 0 3px 6px rgba(26, 26, 26, 0.12));
}

#module-knowledgegraph .kg-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#module-knowledgegraph .kg-search-wrap {
  position: relative;
  min-width: 200px;
}

#module-knowledgegraph .kg-search-input {
  min-height: 44px;
  min-width: 200px;
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
}

#module-knowledgegraph .kg-search-input:focus-visible,
#module-knowledgegraph .kg-chip:focus-visible,
#module-knowledgegraph .kg-persisted-node:focus-visible,
#module-knowledgegraph .kg-zoom-controls button:focus-visible,
#module-knowledgegraph .btn:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}

#module-knowledgegraph .kg-sr-only,
#module-knowledgegraph .sr-only,
#module-knowledgegraph #kgGraphHelp,
#module-knowledgegraph #kgLive,
#module-knowledgegraph #kgFilterSelect.kg-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#module-knowledgegraph #kgLegendChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 10px;
}

#module-knowledgegraph .kg-chip {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border, #2a2f3d);
  border-radius: 999px;
  background: var(--card-bg, #12141c);
  color: var(--text-primary, #e2e8f0);
  font-size: 0.72rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--kg-motion-fast) var(--kg-ease),
              transform var(--kg-motion-fast) var(--kg-ease),
              border-color var(--kg-motion-fast) var(--kg-ease);
}

#module-knowledgegraph .kg-chip:hover {
  border-color: var(--accent, #6366f1);
}

#module-knowledgegraph .kg-chip.is-on {
  border-color: var(--accent, #6366f1);
  box-shadow: var(--kg-elev-2);
}

#module-knowledgegraph .kg-chip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

#module-knowledgegraph .kg-chip-swatch[data-k="project"] { background: #0ea5e9; }
#module-knowledgegraph .kg-chip-swatch[data-k="document"] { background: #10b981; }
#module-knowledgegraph .kg-chip-swatch[data-k="decision"] { background: #f59e0b; }
#module-knowledgegraph .kg-chip-swatch[data-k="risk"] { background: #ef4444; }
#module-knowledgegraph .kg-chip-swatch[data-k="todo"] { background: #8b5cf6; }
#module-knowledgegraph .kg-chip-swatch[data-k="person"] { background: #ec4899; }
#module-knowledgegraph .kg-chip-swatch[data-k="accounting"] { background: #06b6d4; }
#module-knowledgegraph .kg-chip-swatch[data-k="carbonbridge"] { background: #0ea5e9; }
#module-knowledgegraph .kg-chip-swatch[data-k="skillswipe"] { background: #8b5cf6; }

#module-knowledgegraph .kg-chip-n {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #94a3b8);
}

#module-knowledgegraph .kg-toolbar-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

#module-knowledgegraph .kg-toolbar-extra .btn {
  min-height: 44px;
}

#module-knowledgegraph #btnKgPath.is-on {
  border-color: #a5b4fc;
}

#module-knowledgegraph #kgSearchResults {
  position: absolute;
  z-index: 8;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--card-bg, #12141c);
  border: 1px solid var(--border, #2a2f3d);
  border-radius: 8px;
  box-shadow: var(--kg-elev-2);
  max-height: 240px;
  overflow: auto;
}

#module-knowledgegraph .kg-search-hit {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

#module-knowledgegraph .kg-search-hit:hover,
#module-knowledgegraph .kg-search-hit:focus-visible {
  background: var(--accent-dim, rgba(99, 102, 241, 0.12));
}

#module-knowledgegraph #kgBreadcrumb,
#module-knowledgegraph #kgPathBar,
#module-knowledgegraph #kgLive {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

#module-knowledgegraph .kg-persisted-nodes {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0 10px;
}

#module-knowledgegraph .kg-persisted-node {
  min-height: 44px;
  transition: border-color var(--kg-motion-fast) var(--kg-ease),
              background var(--kg-motion-fast) var(--kg-ease);
}

#module-knowledgegraph .kg-persisted-node.is-selected {
  border-color: var(--accent, #6366f1);
  background: var(--accent-dim, rgba(99, 102, 241, 0.12));
}

/* docs-kg lane 2026-10-13: the canvas takes the module surface colour, not a
   near-black literal. js/graph.js reads this computed value for the canvas
   background, minimap plate, node-label plate and PNG export, so one token
   controls all of them in both themes. */
#module-knowledgegraph .kg-graph-container {
  background: var(--bg-secondary, #111317);
}

#module-knowledgegraph[data-theme="light"] .kg-graph-container,
[data-theme="light"] #module-knowledgegraph .kg-graph-container {
  background: var(--bg-secondary, #f1f5f9);
}

#module-knowledgegraph #kgSkeleton {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 24px;
  z-index: 3;
}

#module-knowledgegraph #kgSkeleton[hidden] { display: none; }

#module-knowledgegraph .kg-skel-dot {
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.18);
  min-height: 28px;
  animation: kg-skel 1.2s var(--kg-ease) infinite;
}

#module-knowledgegraph #kgEmptyState,
#module-knowledgegraph #kgFailState {
  margin: 8px 0;
  padding: 20px;
  border: 1px dashed var(--border, #2a2f3d);
  border-radius: 10px;
  color: var(--text-secondary, #cbd5e1);
}

/* ── docs-kg lane: the single empty state ──────────────────────────────── */
#module-knowledgegraph #kgEmptyState {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 62ch;
}
#module-knowledgegraph .kg-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  letter-spacing: -0.01em;
}
#module-knowledgegraph .kg-empty-body,
#module-knowledgegraph .kg-empty-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}
#module-knowledgegraph .kg-empty-note { color: var(--text-muted, #94a3b8); }
#module-knowledgegraph .kg-empty-note:empty { display: none; }
#module-knowledgegraph .kg-empty-cta {
  align-self: flex-start;
  min-height: 44px;
  background: var(--accent, #6366f1);
  border: 1px solid var(--accent, #6366f1);
  color: #fff;
  font-weight: 500;
}
#module-knowledgegraph #kgStats[hidden],
#module-knowledgegraph #kgBreadcrumb[hidden],
#module-knowledgegraph .kg-toolbar-extra[hidden],
#module-knowledgegraph .kg-body[hidden] { display: none; }

/* Disabled Path / Export at 0 nodes: aria-disabled stays focusable, so the
   affordance is visibly inert rather than silently dead. */
#module-knowledgegraph .kg-toolbar-extra .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── docs-kg lane: populated side panel ───────────────────────────────── */
#module-knowledgegraph .kg-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 232px;
  flex: 0 0 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
#module-knowledgegraph .kg-side .kg-persisted-nodes {
  flex-direction: column;
  overflow-x: visible;
}
#module-knowledgegraph .kg-side #kgLegendChips { padding: 0 0 4px; gap: 4px; }
/* Inside the 232px side panel the 44px pill chips took the whole column and
   pushed the node list below the fold (seen in the 2026-10-14 headless run).
   Compact rows here; the 44px target stays on touch devices below. */
#module-knowledgegraph .kg-side .kg-chip {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  box-shadow: none;
}
#module-knowledgegraph .kg-side .kg-chip.is-on { box-shadow: none; background: var(--bg-hover, #1e293b); }
@media (hover: none) {
  #module-knowledgegraph .kg-side .kg-chip { min-height: 44px; }
}
#module-knowledgegraph .kg-legend-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid var(--border, #2a2f3d);
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
}
#module-knowledgegraph .kg-node-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #64748b;
}
#module-knowledgegraph .kg-node-dot[data-k="project"],
#module-knowledgegraph .kg-legend-dot[data-k="project"] { background: #0ea5e9; }
#module-knowledgegraph .kg-node-dot[data-k="document"],
#module-knowledgegraph .kg-legend-dot[data-k="document"] { background: #10b981; }
#module-knowledgegraph .kg-node-dot[data-k="decision"],
#module-knowledgegraph .kg-legend-dot[data-k="decision"] { background: #f59e0b; }
#module-knowledgegraph .kg-node-dot[data-k="risk"],
#module-knowledgegraph .kg-legend-dot[data-k="risk"] { background: #ef4444; }
#module-knowledgegraph .kg-node-dot[data-k="todo"],
#module-knowledgegraph .kg-legend-dot[data-k="todo"] { background: #8b5cf6; }
#module-knowledgegraph .kg-node-dot[data-k="person"],
#module-knowledgegraph .kg-legend-dot[data-k="person"] { background: #ec4899; }
#module-knowledgegraph .kg-node-dot[data-k="accounting"],
#module-knowledgegraph .kg-legend-dot[data-k="accounting"] { background: #06b6d4; }
#module-knowledgegraph .kg-detail-linked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2a2f3d);
}
#module-knowledgegraph .kg-detail-linked-h {
  margin: 0 0 2px;
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
#module-knowledgegraph .kg-linked-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-secondary, #cbd5e1);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}
#module-knowledgegraph .kg-linked-row:hover,
#module-knowledgegraph .kg-linked-row:focus-visible {
  border-color: var(--border, #2a2f3d);
  background: var(--bg-hover, #1e293b);
  outline: none;
}
#module-knowledgegraph .kg-linked-row small {
  margin-left: auto;
  color: var(--text-muted, #94a3b8);
  font-size: 0.6rem;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  #module-knowledgegraph .kg-side {
    width: 100%;
    max-height: 200px;
  }
}

#module-knowledgegraph #kgEmptyState[hidden],
#module-knowledgegraph #kgFailState[hidden] { display: none; }

#module-knowledgegraph .kg-honest-empty {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

#module-knowledgegraph .kg-minimap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 160px;
  height: 120px;
  border: 1px solid var(--border, #2a2f3d);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--kg-elev-2);
  display: none;
  z-index: 4;
}

#module-knowledgegraph #kgMinimapCanvas {
  width: 160px;
  height: 120px;
  cursor: pointer;
}

#module-knowledgegraph .kg-minimap-label {
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

#module-knowledgegraph .kg-zoom-controls button {
  width: 44px;
  height: 44px;
}

#module-knowledgegraph .kg-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#module-knowledgegraph .kg-detail-actions .btn {
  min-height: 44px;
}

@media (max-width: 480px) {
  #module-knowledgegraph .kg-body {
    flex-direction: column;
    height: auto;
  }
  #module-knowledgegraph .kg-detail-panel {
    width: 100%;
    max-height: 220px;
  }
  #module-knowledgegraph .kg-minimap {
    width: 120px;
    height: 90px;
  }
}

@keyframes kg-skel {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  #module-knowledgegraph {
    --kg-motion-fast: 0ms;
    --kg-motion-base: 0ms;
    --kg-motion-slow: 0ms;
    --kg-ease: linear;
  }
  #module-knowledgegraph .kg-skel-dot { animation: none; }
  #module-knowledgegraph .kg-chip,
  #module-knowledgegraph .kg-persisted-node,
  #module-knowledgegraph .kg-search-input {
    transition: none;
  }
}

/* v2.76.118: minimap label #94a3b8 fails AA on the light #eef2f7 graph
   container (2.6:1). 600-weight slate ink, dark theme untouched.
   Gate: scripts/test_light_theme_contrast.py */
[data-theme="light"] #module-knowledgegraph .kg-minimap-label,
#module-knowledgegraph[data-theme="light"] .kg-minimap-label { color: #475569; }