/* Knowledge Map — SVG graph explorer for CU nodes and bonds */
/* Light theme. Design standard v1.0. */

:root {
  --bg:#FAFAFA; --white:#FFFFFF; --surface:#EEEEEE; --overlay:#F5F5F5;
  --text:#111111; --muted:#666666; --placeholder:#999999;
  --border:rgba(0, 0, 0, 0.08); --accent:#2563EB; --accent-hover:#1D4ED8; --accent-light:rgba(37,99,235,0.06);
  --green:#7dba7d; --yellow:#d4a84d; --red:#c96b6b; --purple:#7C3AED;
  --t0:#6366f1;--t1:#4f46e5;--t2:#2563eb;--t3:#0891b2;--t4:#059669;
  --t5:#ca8a04;--t6:#d97706;--t7:#ea580c;--t8:#dc2626;--t9:#9ca3af;
  --t10:#7c3aed;--t11:#e11d48;--t12:#64748b;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif;overflow:hidden;}
body{display:flex;flex-direction:column;}

/* Header bar */
.chrome{display:flex;align-items:center;gap:12px;padding:10px 20px;
  background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0;}
.chrome h1{font-size:16px;font-weight:600;color:var(--text);}
.chrome h1 span{color:var(--accent);}
.chrome-sep{width:1px;height:18px;background:var(--border);}
.chrome-title{font-size:14px;color:var(--text);font-weight:500;}
.spacer{flex:1;}
.chrome select{padding:5px 10px;border:1px solid var(--border);border-radius:6px;
  font-size:13px;font-family:inherit;background:var(--white);color:var(--text);cursor:pointer;}
.chrome select:focus{outline:none;border-color:var(--accent);}
.ch-btn{font-size:12px;padding:6px 14px;background:var(--white);
  border:1px solid var(--border);color:var(--text);border-radius:6px;cursor:pointer;
  font-family:inherit;font-weight:500;transition:all 0.15s;}
.ch-btn:hover{border-color:var(--accent);color:var(--accent);}
.ch-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.ch-btn.primary:hover{background:var(--accent-hover);}

/* Main layout */
#main{display:flex;flex:1;overflow:hidden;min-height:0;}

/* SVG viewport */
#viewport-wrap{flex:1;position:relative;overflow:hidden;cursor:grab;background:var(--surface);}
#viewport-wrap.panning{cursor:grabbing;}
#svg-canvas{width:100%;height:100%;display:block;}

/* Node styles */
.canvas-node{cursor:pointer;}
.canvas-node rect{stroke-width:1.5;transition:all 0.15s;}
.canvas-node:hover rect{stroke-width:2.5;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.1));}
.canvas-node.selected rect{stroke-width:2.5;filter:drop-shadow(0 2px 12px rgba(37,99,235,0.3));}
.canvas-node.search-match rect{stroke-width:2.5;stroke:#f59e0b !important;filter:drop-shadow(0 0 8px rgba(245,158,11,0.4));}
.canvas-node.dimmed{opacity:0.25;}
.node-label{font-family:'IBM Plex Sans',sans-serif;fill:var(--text);
  pointer-events:none;dominant-baseline:middle;text-anchor:middle;}
.node-tier{font-family:'IBM Plex Sans',sans-serif;font-weight:600;
  pointer-events:none;dominant-baseline:middle;}
.node-barcode{font-family:'IBM Plex Sans',sans-serif;fill:var(--muted);
  pointer-events:none;dominant-baseline:middle;text-anchor:middle;}

/* Edge styles */
.canvas-edge{fill:none;transition:opacity 0.15s;}
.canvas-edge.causal{stroke:var(--accent);stroke-width:2;}
.canvas-edge.support{stroke:var(--green);stroke-width:2;}
.canvas-edge.contradiction{stroke:var(--red);stroke-width:2;stroke-dasharray:6 4;}
.canvas-edge.semantic{stroke:var(--muted);stroke-width:1.5;opacity:0.5;}
.canvas-edge.temporal{stroke:var(--purple);stroke-width:1.5;}
.canvas-edge.refinement{stroke:var(--yellow);stroke-width:1.5;}

/* Detail panel */
#detail-panel{width:300px;flex-shrink:0;border-left:1px solid var(--border);
  display:flex;flex-direction:column;background:var(--white);transition:margin-right 0.2s;}
#detail-panel.collapsed{margin-right:-300px;}
.dp-header{padding:12px 16px;background:var(--white);border-bottom:1px solid var(--border);
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
.dp-close{margin-left:auto;cursor:pointer;color:var(--muted);font-size:16px;
  background:none;border:none;padding:0;font-family:inherit;}
.dp-close:hover{color:var(--red);}
#detail-body{flex:1;overflow-y:auto;padding:16px;}
.dp-row{margin-bottom:14px;}
.dp-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;
  font-weight:600;margin-bottom:4px;}
.dp-value{font-size:14px;color:var(--text);}
.dp-barcode{font-size:13px;color:var(--accent);font-weight:500;}
.dp-text{font-size:13px;color:var(--text);line-height:1.6;background:var(--surface);
  padding:10px 12px;border-radius:6px;border:1px solid var(--border);}
.tier-pill{display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:12px;font-weight:600;color:#fff;}
.dp-bonds{margin-top:8px;}
.dp-bond{font-size:12px;padding:4px 0;color:var(--muted);display:flex;align-items:center;gap:6px;}
.bond-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* Zoom controls */
#zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;gap:6px;}
.zoom-btn{width:32px;height:32px;background:var(--white);border:1px solid var(--border);
  border-radius:6px;color:var(--text);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:all 0.15s;
  font-family:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.zoom-btn:hover{border-color:var(--accent);color:var(--accent);}

/* Legend */
#legend{position:absolute;bottom:16px;left:16px;background:var(--white);
  border:1px solid var(--border);border-radius:8px;padding:10px 14px;
  font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.legend-item:last-child{margin-bottom:0;}
.legend-line{width:24px;height:2px;border-radius:1px;}
.legend-dash{width:24px;height:0;border-top:2px dashed;}

/* Loading */
#loading-overlay{position:absolute;inset:0;background:rgba(250,250,250,0.92);
  display:flex;align-items:center;justify-content:center;z-index:100;}
#loading-overlay.hidden{display:none;}
.loading-text{font-size:14px;color:var(--accent);font-weight:500;}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:absolute;inset:0;z-index:10;text-align:center;padding:40px;color:var(--muted);background:var(--bg);}
.empty-state h2{font-size:18px;color:var(--text);margin-bottom:8px;font-weight:600;}
.empty-state p{font-size:14px;max-width:400px;line-height:1.6;margin-bottom:20px;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:3px;}