/* KG VIEW — styles for js/kg-view.js (one reusable knowledge-graph viewer). Self-contained: every class is kgw-*.
   Theming: the component reads ONLY the --kgw-* variables below. Each one falls back to the common host tokens
   (--surface, --fg, --mut, --bd, --acc, …) and then to a literal, so it works in any console that has those tokens,
   and on a bare page in both light and dark (prefers-color-scheme). Override any --kgw-* on .kgw or an ancestor. */
.kgw{
  --kgw-bg: var(--chart-surf, var(--surface-2, #f8fafc));
  --kgw-surface: var(--surface, var(--card, #ffffff));
  --kgw-surface-2: var(--surface-3, var(--soft, #e9edf4));
  --kgw-fg: var(--fg, #172033);
  --kgw-fg-2: var(--fg-2, #38445a);
  --kgw-mut: var(--mut, #566176);
  --kgw-bd: var(--bd, var(--line, #dfe4ec));
  --kgw-bd-strong: var(--bd-strong, #c5cdd9);
  --kgw-acc: var(--acc, var(--accent, #4f46e5));
  --kgw-on-acc: var(--on-acc, #ffffff);
  --kgw-acc-fg: var(--acc-fg, var(--kgw-acc));
  --kgw-hi: var(--warn, #b45309);
  --kgw-edge: var(--mut, #8a93a5);
  --kgw-shadow: var(--shadow-md, 0 10px 30px rgba(23,32,51,.14));
  --kgw-radius: 12px;
  --kgw-height: min(72vh, 720px);
  position: relative; display: flex; flex-direction: column; gap: 10px; color: var(--kgw-fg);
  font: 13px/1.4 var(--font, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
}
@media (prefers-color-scheme: dark){
  .kgw{
    --kgw-bg: var(--chart-surf, var(--surface-2, #131a2a)); --kgw-surface: var(--surface, var(--card, #171f31));
    --kgw-surface-2: var(--surface-3, var(--soft, #202a41)); --kgw-fg: var(--fg, #e7ebf4); --kgw-fg-2: var(--fg-2, #c4cbdb);
    --kgw-mut: var(--mut, #a2acc2); --kgw-bd: var(--bd, var(--line, #2a3550)); --kgw-bd-strong: var(--bd-strong, #3a4766);
    --kgw-acc: var(--acc, var(--accent, #8b93ff)); --kgw-on-acc: var(--on-acc, #0f1430); --kgw-hi: var(--warn, #fbbf24);
    --kgw-edge: var(--mut, #a2acc2); --kgw-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.45));
  }
}
.kgw *, .kgw *::before, .kgw *::after{ box-sizing: border-box; }
.kgw [hidden]{ display: none !important; }

/* toolbar */
.kgw-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kgw-spacer{ flex: 1 1 0; min-width: 0; }
.kgw-facets{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kgw-facet{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kgw-flabel{ font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kgw-fg-2); }
.kgw-seg{ display: inline-flex; flex-wrap: wrap; border: 1px solid var(--kgw-bd-strong); border-radius: 9px; overflow: hidden; }
.kgw-seg button{ background: var(--kgw-surface); color: var(--kgw-fg-2); border: 0; border-right: 1px solid var(--kgw-bd); padding: 6px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.kgw-seg button:last-child{ border-right: 0; }
.kgw-seg button:hover{ background: var(--kgw-surface-2); color: var(--kgw-fg); }
.kgw-seg button.on{ background: var(--kgw-acc); color: var(--kgw-on-acc); }
.kgw-btn{ display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; justify-content: center; padding: 0 9px; border: 1px solid var(--kgw-bd-strong);
  border-radius: 8px; background: var(--kgw-surface); color: var(--kgw-fg-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.kgw-btn:hover{ background: var(--kgw-surface-2); color: var(--kgw-fg); }
.kgw-btn.on, .kgw-btn[aria-pressed="true"]{ border-color: var(--kgw-acc); color: var(--kgw-acc-fg); }
.kgw button:focus-visible, .kgw-canvas:focus-visible, .kgw-search-in:focus-visible{ outline: 2px solid var(--kgw-acc); outline-offset: 2px; }
.kgw-zoom{ display: inline-flex; align-items: center; gap: 4px; }
.kgw-zread{ min-width: 52px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--kgw-mut); }
.kgw-stats{ font-size: 12px; color: var(--kgw-mut); white-space: nowrap; }

/* search */
.kgw-search{ position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--kgw-bd-strong); border-radius: 8px;
  background: var(--kgw-surface); color: var(--kgw-mut); min-width: 220px; flex: 0 1 300px; }
.kgw-search:focus-within{ border-color: var(--kgw-acc); }
.kgw .kgw-search-in{ flex: 1; min-width: 0; height: auto; margin: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; outline: 0; background: transparent !important; -webkit-appearance: none; appearance: none; color: var(--kgw-fg); font: inherit; font-size: 12.5px; padding: 0; }
.kgw-search-n{ font-size: 11px; white-space: nowrap; color: var(--kgw-mut); }
.kgw-sugg{ position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px; max-height: 320px; overflow-y: auto; z-index: 30; padding: 4px;
  background: var(--kgw-surface); border: 1px solid var(--kgw-bd); border-radius: 10px; box-shadow: var(--kgw-shadow); }
.kgw-sitem{ display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--kgw-fg); }
.kgw-sitem:hover, .kgw-sitem.sel{ background: var(--kgw-surface-2); }
.kgw-slabel{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgw-sitem small{ color: var(--kgw-mut); font-size: 11px; }

/* stage */
.kgw-stage{ display: flex; gap: 12px; align-items: stretch; height: var(--kgw-height); min-height: 360px; }
.kgw-canvas-wrap{ position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--kgw-bd); border-radius: var(--kgw-radius); background: var(--kgw-bg); }
.kgw-canvas{ display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; outline: none; }
.kgw-canvas.grabbing{ cursor: grabbing !important; }
.kgw-probe{ position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.kgw-tip{ position: absolute; z-index: 5; pointer-events: none; max-width: 340px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--kgw-bd);
  background: var(--kgw-surface); color: var(--kgw-fg); box-shadow: var(--kgw-shadow); font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.kgw-tip b{ font-weight: 650; overflow-wrap: anywhere; }
.kgw-tip span{ color: var(--kgw-mut); overflow-wrap: anywhere; }
.kgw-empty{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--kgw-mut); pointer-events: none; }
.kgw-hint{ position: absolute; right: 10px; top: 10px; font-size: 10.5px; color: var(--kgw-mut); pointer-events: none; padding: 4px 8px; border-radius: 7px;
  background: color-mix(in srgb, var(--kgw-surface) 85%, transparent); border: 1px solid var(--kgw-bd); }
.kgw-legend{ position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); max-height: 40%; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px;
  border-radius: 9px; border: 1px solid var(--kgw-bd); background: color-mix(in srgb, var(--kgw-surface) 90%, transparent); }
.kgw-lrow{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.kgw-ltitle{ font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kgw-mut); width: 46px; flex: none; }
.kgw-lchip{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--kgw-fg-2); font: inherit; font-size: 11.5px; cursor: pointer; }
.kgw-lchip:hover{ background: var(--kgw-surface-2); color: var(--kgw-fg); }
.kgw-lchip small{ color: var(--kgw-mut); font-size: 10.5px; }
.kgw-lchip.off{ opacity: .42; text-decoration: line-through; }
.kgw-dot{ display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 99px; }
.kgw-line{ display: inline-block; flex: none; width: 14px; height: 3px; border-radius: 2px; }
.kgw-line.dashed{ -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); }

/* details panel */
.kgw-panel{ position: relative; flex: 0 0 330px; min-height: 0; overflow: auto; padding: 14px; border: 1px solid var(--kgw-bd); border-radius: var(--kgw-radius); background: var(--kgw-surface); }
.kgw-pclose{ position: absolute; top: 8px; right: 8px; height: 26px; min-width: 26px; padding: 0; }
.kgw-pempty{ color: var(--kgw-mut); font-size: 12.5px; line-height: 1.55; }
.kgw-pname{ display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; padding-right: 30px; overflow-wrap: anywhere; }
.kgw-psub{ color: var(--kgw-mut); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.kgw-pdesc{ margin: 10px 0 0; color: var(--kgw-fg-2); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.kgw-kv{ display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 12px; }
.kgw-kv dt{ color: var(--kgw-mut); } .kgw-kv dd{ margin: 0; overflow-wrap: anywhere; }
.kgw-ph{ margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kgw-fg-2); }
.kgw-edge{ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--kgw-bd); }
.kgw-dir{ color: var(--kgw-mut); }
.kgw-rel{ display: inline-block; font-size: 10.5px; font-weight: 650; padding: 0 6px; border: 1px solid; border-radius: 99px; line-height: 16px; }
.kgw-elabel{ color: var(--kgw-mut); }
.kgw-nb{ display: inline-flex; align-items: center; gap: 5px; max-width: 100%; background: none; border: 0; padding: 0; color: var(--kgw-acc-fg); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.kgw-nb span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgw-nb:hover span{ text-decoration: underline; }
.kgw-pends{ display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin-top: 10px; font-size: 12.5px; }
.kgw-plabel{ color: var(--kgw-mut); }
.kgw-more{ color: var(--kgw-mut); font-size: 12px; padding: 6px 0; }

/* full screen: Fullscreen API (:fullscreen) and the fallback overlay share one layout */
.kgw:fullscreen, .kgw.kgw-overlay{ position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; padding: 12px; margin: 0;
  background: var(--kgw-surface); }
.kgw:-webkit-full-screen{ width: 100vw; height: 100vh; padding: 12px; background: var(--kgw-surface); }
.kgw:fullscreen .kgw-stage, .kgw.kgw-overlay .kgw-stage, .kgw:-webkit-full-screen .kgw-stage{ flex: 1 1 auto; height: auto !important; min-height: 0; }
.kgw::backdrop{ background: var(--kgw-surface); }
html.kgw-noscroll, html.kgw-noscroll body{ overflow: hidden !important; }

@media (max-width: 900px){
  .kgw-stage{ flex-direction: column; height: auto; }
  .kgw-canvas-wrap{ flex: none; height: 60vh; min-height: 320px; }
  .kgw-panel{ flex: none; max-height: none; }
  .kgw:fullscreen .kgw-canvas-wrap, .kgw.kgw-overlay .kgw-canvas-wrap{ flex: 1 1 auto; height: auto; }
  .kgw:fullscreen .kgw-panel, .kgw.kgw-overlay .kgw-panel{ max-height: 35vh; }
  .kgw-search{ flex: 1 1 100%; }
  .kgw-hint{ display: none; }
}