/* ==========================================================================
   INTELLIGENCE GRAPH
   Reuses .panel/.btn/.badge tokens from design-system.css/tokens.css —
   no new color system, light-only (this product has no dark mode; see
   IMPLEMENTATION_REPORT.md "UX" section for that scope note).
   ========================================================================== */

.ig-counts{
  display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--text-muted);
}
.ig-counts strong{ color:var(--text); font-size:.95rem; display:block; }
.ig-counts .ig-count-item{ text-align:center; min-width:64px; }

.ig-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ig-search-wrap{ position:relative; flex:1 1 260px; min-width:220px; }
.ig-input{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:.88rem; background:var(--surface); color:var(--text);
}
.ig-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.ig-search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  max-height:280px; overflow-y:auto; z-index:20;
}
.ig-search-result{
  display:flex; justify-content:space-between; gap:8px; padding:8px 12px; cursor:pointer; font-size:.85rem;
}
.ig-search-result:hover, .ig-search-result.is-active{ background:var(--surface-2); }
.ig-search-result .ig-muted{ color:var(--text-muted); font-size:.76rem; }

.ig-filter-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ig-filter-label{ font-size:.78rem; color:var(--text-muted); }
.ig-chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:1px solid var(--border);
  border-radius:var(--radius-pill); font-size:.76rem; cursor:pointer; background:var(--surface); user-select:none;
}
.ig-chip input{ margin:0; }
.ig-chip:has(input:checked){ background:var(--surface-3); border-color:var(--accent-2); }

.ig-actions{ display:flex; gap:8px; margin-left:auto; }

.ig-stage-panel{ padding:0; overflow:hidden; }
.ig-stage-wrap{ position:relative; width:100%; height:min(70vh, 640px); min-height:420px; background:var(--surface); }
.ig-canvas{ width:100%; height:100%; display:block; cursor:grab; }
.ig-canvas:active{ cursor:grabbing; }

.ig-scope-badge{
  position:absolute; bottom:10px; left:10px; font-size:.7rem; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:3px 10px;
}
.ig-legend{
  position:absolute; top:10px; right:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 10px; font-size:.72rem; color:var(--text-secondary);
  max-width:180px; box-shadow:var(--shadow-sm);
}
.ig-legend div{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.ig-legend div:last-child{ margin-bottom:0; }

.ig-empty-state{ padding:64px 24px; text-align:center; color:var(--text-secondary); }
.ig-empty-state a{ margin:4px; }

.ig-a11y-view{ padding:20px; max-height:640px; overflow-y:auto; }
.ig-a11y-node{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px; }
.ig-a11y-node h3{ margin:0 0 4px; font-size:.95rem; }
.ig-a11y-node ul{ margin:8px 0 0; padding-left:18px; font-size:.85rem; }
.ig-a11y-node button{ font-size:.8rem; }

.ig-drawer-overlay{
  position:fixed; inset:0; background:var(--scrim); z-index:var(--z-modal);
  display:flex; justify-content:flex-end; opacity:0; visibility:hidden;
  transition:opacity var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal);
}
.ig-drawer-overlay.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.ig-drawer{
  width:380px; max-width:92vw; height:100%; background:var(--surface); box-shadow:var(--shadow-xl);
  padding:22px 20px; overflow-y:auto; transform:translateX(100%);
  transition:transform var(--duration-normal) var(--ease-out);
}
.ig-drawer-overlay.is-open .ig-drawer{ transform:translateX(0); }
.ig-drawer-close{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.4rem;
  cursor:pointer; color:var(--text-muted); line-height:1;
}
.ig-drawer-close:hover{ color:var(--text); }

.ig-drawer h2{ font-size:1.05rem; margin:0 0 4px; padding-right:24px; }
.ig-drawer .ig-drawer-subtitle{ color:var(--text-secondary); font-size:.82rem; margin-bottom:14px; word-break:break-word; }
.ig-drawer-section{ margin-bottom:18px; }
.ig-drawer-section h4{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:0 0 8px; }
.ig-metric-row{ display:flex; justify-content:space-between; font-size:.85rem; padding:5px 0; border-bottom:1px dashed var(--border); }
.ig-metric-row:last-child{ border-bottom:none; }
.ig-evidence-item{ font-size:.85rem; padding:8px 10px; background:var(--surface-2); border-radius:var(--radius-sm); margin-bottom:6px; }
.ig-evidence-item a{ display:block; margin-top:4px; font-size:.78rem; word-break:break-all; }
.ig-conf-badge{ display:inline-block; padding:2px 8px; border-radius:var(--radius-pill); font-size:.7rem; font-weight:600; }
.ig-conf-high{ background:var(--success-tint); color:var(--success-text); }
.ig-conf-medium{ background:var(--warning-tint); color:var(--warning-text); }
.ig-conf-low{ background:var(--danger-tint); color:var(--danger-text); }
.ig-notice{ font-size:.78rem; color:var(--warning-text); background:var(--warning-tint); border-radius:var(--radius-sm); padding:8px 10px; margin-bottom:12px; }

.ig-changes-list{ list-style:none; margin:0; padding:0; }
.ig-changes-list li{ padding:10px 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.ig-changes-list li:last-child{ border-bottom:none; }
.ig-changes-list time{ display:block; font-size:.72rem; color:var(--text-muted); }

@media (max-width: 720px){
  .ig-stage-wrap{ height:60vh; }
  .ig-drawer{ width:100%; }
  .ig-actions{ margin-left:0; width:100%; }
}

/* ==========================================================================
   MARKETING INTELLIGENCE CANVAS (.mkc-*)
   Sample-data relationship graphs on public /intelligence/* pages, rendered
   by includes/marketing/canvas-demos.php and driven by
   assets/js/marketing-canvas.js. Same token family as .ig-* above
   (--ig-node-*, --ig-conf-*, --text/--surface/--border/--radius/--shadow) —
   no new colors, no second design system. Deterministic layout: node
   positions are fixed in PHP, not computed by physics.
   ========================================================================== */

.mkc{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; }
.mkc__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); }
.mkc__title{ font-size:.92rem; font-weight:600; color:var(--text); margin:0; }
.mkc__views{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); padding:2px; gap:2px; }
.mkc__viewbtn{ border:0; background:transparent; font-size:.76rem; padding:5px 12px; border-radius:var(--radius-pill); color:var(--text-muted); cursor:pointer; }
.mkc__viewbtn.is-active{ background:var(--surface-3); color:var(--text); }
.mkc__viewbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.mkc__body{ position:relative; }
.mkc__stage{ position:relative; padding:8px 16px 16px; }
.mkc__svg{ width:100%; height:auto; display:block; aspect-ratio:800/480; }

.mkc-edge{ stroke:var(--border); stroke-width:1.5; transition:opacity .18s ease, stroke .18s ease; }
.mkc-edge--observed{ stroke-dasharray:4 4; }
.mkc-edge--opportunity{ stroke:var(--ig-node-opportunity); stroke-width:2; }
.mkc-edge--supports{ stroke-dasharray:3 5; }
.mkc-edge--competes_with{ stroke:var(--ig-node-competitor); opacity:.55; }
.mkc-edge--mentions{ stroke:var(--ig-node-brand); opacity:.5; }
.mkc-edge.is-dim{ opacity:.12; }
.mkc-edge.is-active{ opacity:1; }

.mkc-node{ cursor:pointer; transition:opacity .18s ease; }
.mkc-node:focus{ outline:none; }
.mkc-node:focus-visible .mkc-node__dot{ stroke:var(--accent); stroke-width:3; }
.mkc-node.is-dim{ opacity:.25; }
.mkc-node.is-active .mkc-node__dot{ stroke:var(--text); stroke-width:2.5; }
.mkc-node__dot{ fill:var(--ig-node-default); stroke:var(--surface); stroke-width:2; transition:stroke .18s ease; }
.mkc-node__label{ font-size:11px; fill:var(--text-muted); font-family:var(--font-body); pointer-events:none; }

.mkc-node--brand .mkc-node__dot{ fill:var(--ig-node-brand); }
.mkc-node--competitor .mkc-node__dot{ fill:var(--ig-node-competitor); }
.mkc-node--domain .mkc-node__dot{ fill:var(--ig-node-domain); }
.mkc-node--url .mkc-node__dot{ fill:var(--ig-node-url); }
.mkc-node--theme .mkc-node__dot{ fill:var(--ig-node-theme); }
.mkc-node--entity .mkc-node__dot{ fill:var(--ig-node-entity); }
.mkc-node--comment_cluster .mkc-node__dot{ fill:var(--ig-node-comment_cluster); }
.mkc-node--opportunity .mkc-node__dot{ fill:var(--ig-node-opportunity); }
.mkc-node--narrative .mkc-node__dot{ fill:var(--ig-node-narrative); }
.mkc-node--citation .mkc-node__dot{ fill:var(--ig-node-citation); }
.mkc-node--brand .mkc-node__label{ font-weight:700; fill:var(--text); }

.mkc__legend{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--border); font-size:.76rem; }
.mkc-legend__item{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--text-muted); cursor:pointer; padding:2px 4px; border-radius:var(--radius-sm); }
.mkc-legend__item.is-filtered{ background:var(--surface-3); color:var(--text); }
.mkc-legend__item:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.mkc-legend__swatch{ width:10px; height:10px; border-radius:999px; display:inline-block; background:var(--ig-node-default); }
.mkc__legend-edge{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); }
.mkc-legend__line{ width:18px; height:0; border-top:2px solid var(--border); display:inline-block; }
.mkc-legend__line.mkc-edge--observed{ border-top-style:dashed; }
.mkc-legend__line.mkc-edge--opportunity{ border-top-color:var(--ig-node-opportunity); }

.mkc__evidence{ position:absolute; top:8px; right:8px; width:min(280px, 80%); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:14px; }
.mkc__evidence-close{ position:absolute; top:6px; right:8px; border:0; background:transparent; font-size:1.1rem; line-height:1; cursor:pointer; color:var(--text-muted); }
.mkc__evidence-close:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.mkc__evidence h4{ margin:0 18px 6px 0; font-size:.88rem; }
.mkc__evidence p{ font-size:.8rem; color:var(--text-muted); margin:0 0 8px; }
.mkc__evidence-dl{ margin:0; display:grid; gap:6px; }
.mkc__evidence-dl > div{ display:grid; grid-template-columns:88px 1fr; gap:8px; font-size:.76rem; }
.mkc__evidence-dl dt{ color:var(--text-muted); }
.mkc__evidence-dl dd{ margin:0; color:var(--text); }

.mkc__list{ padding:8px 16px 16px; }

/* Node/edge kinds used by Growth, SEO, Advertising and Content canvases
   (added Phase 2 — same --ig-node-* tokens as Phase 1, zero new colors). */
.mkc-node--page .mkc-node__dot{ fill:var(--ig-node-page); }
.mkc-node--campaign .mkc-node__dot{ fill:var(--ig-node-campaign); }
.mkc-node--action .mkc-node__dot{ fill:var(--ig-node-action); }
.mkc-node--alert .mkc-node__dot{ fill:var(--ig-node-alert); }
.mkc-node--keyword .mkc-node__dot{ fill:var(--ig-node-keyword); }
.mkc-node--site .mkc-node__dot{ fill:var(--ig-node-site); }

.mkc-edge--flow{ stroke:var(--ig-node-brand); stroke-width:2.5; opacity:.7; }
.mkc-edge--links_to{ stroke-dasharray:2 3; }
.mkc-edge--belongs_to{ opacity:.55; }
.mkc-edge--broken{ stroke:var(--ig-node-alert); stroke-dasharray:3 3; stroke-width:2; }
.mkc-legend__line.mkc-edge--flow{ border-top-color:var(--ig-node-brand); }
.mkc-legend__line.mkc-edge--links_to{ border-top-style:dashed; }
.mkc-legend__line.mkc-edge--broken{ border-top-style:dashed; border-top-color:var(--ig-node-alert); }

@media (prefers-reduced-motion: reduce){
  .mkc-edge, .mkc-node{ transition:none; }
}
@media (max-width:640px){
  .mkc__evidence{ position:static; width:auto; margin:10px 16px 0; box-shadow:none; }
  .mkc__stage{ padding-bottom:8px; }
}