.graph-page { background:var(--bg-paper); color:var(--text-ink); }
.graph-page [hidden] { display:none!important; }
.graph-page a { color:inherit; }
.graph-page button,.graph-page input,.graph-page select { font:inherit; }
.graph-page button { cursor:pointer; }
.graph-page :is(a,button,input,select,summary,[tabindex]):focus-visible { outline:2px solid var(--accent-red); outline-offset:4px; }
.graph-page .nav-link[aria-current] { color:var(--accent-red); }
.graph-skip { position:absolute; top:-80px; z-index:200; padding:14px; background:var(--bg-paper); }
.graph-skip:focus { top:0; }
.graph-main { max-width:1440px; margin:auto; padding:42px 48px 50px; }
.graph-heading { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; padding:0 0 36px; }
.graph-kicker { font:11px/1.8 var(--font-sans); letter-spacing:1.4px; color:var(--text-muted); margin-bottom:22px; }
.graph-kicker a { text-decoration:none; }
.graph-heading h1 { font:500 clamp(32px,3.8vw,54px)/1.45 var(--font-serif); letter-spacing:-.04em; margin:0; }
.graph-heading em { color:var(--archive-ink); font-style:normal; }
.graph-intro { max-width:395px; font:14px/1.9 var(--font-sans); color:var(--text-muted); }
.research-counts { display:flex; gap:26px; margin-top:22px; }
.research-counts strong { display:block; font:500 30px/1.4 var(--font-serif); color:var(--text-ink); }
.research-counts span { font-size:10px; }
.graph-starts { display:flex; flex-wrap:wrap; gap:12px 28px; padding:18px 0; border-top:1px solid var(--text-ink); font-size:13px; }
.graph-starts span { color:var(--text-muted); }
.graph-starts a { color:var(--accent-red); text-decoration:none; }
.graph-tools { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding:17px 0; border-block:1px solid var(--border-subtle); }
.graph-tools label { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-muted); }
.graph-tools select,.graph-tools input[type=search] { color:var(--text-ink); background:transparent; border:0; border-bottom:1px solid var(--border-subtle); padding:9px 3px; min-width:0; max-width:210px; font-size:13px; }
.graph-tools input[type=checkbox] { accent-color:var(--accent-red); }
.graph-page button { background:transparent; border:1px solid var(--border-subtle); border-radius:3px; padding:9px 12px; color:var(--text-ink); font-size:13px; min-height:38px; }
.graph-page button:disabled { opacity:.4; cursor:default; }
.graph-status { min-height:40px; padding:12px 0; font-size:12px; color:var(--text-muted); }
.graph-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:28px; }
.graph-column { min-width:0; }
.graph-canvas { position:relative; border:1px solid var(--border-subtle); background:var(--bg-surface-solid); box-shadow:var(--shadow-card); overflow:hidden; }
.canvas-heading { position:absolute; top:20px; left:24px; pointer-events:none; }
.canvas-heading span { display:block; color:var(--text-muted); letter-spacing:2px; font-size:9px; }
.canvas-heading strong { display:block; font:500 20px/1.6 var(--font-serif); margin-top:6px; }
#network { display:block; width:100%; height:510px; touch-action:none; cursor:grab; }
#network:active { cursor:grabbing; }
.graph-node { cursor:pointer; }
.graph-node text { font:12px var(--font-sans); fill:var(--text-ink); paint-order:stroke; stroke:var(--bg-surface-solid); stroke-width:4px; stroke-linejoin:round; }
.graph-node circle { fill:var(--bg-paper); stroke:var(--accent-blue); stroke-width:1.8px; }
.graph-node.source circle { stroke:var(--accent-blue); }
.graph-node.layer-communication circle { stroke:var(--accent-blue); }
.graph-node.layer-shared circle { fill:var(--accent-gold); stroke:var(--text-ink); }
.graph-node.claim circle { stroke:var(--accent-gold); }
.graph-node.selected circle { fill:var(--accent-red); stroke:var(--accent-red); }
.graph-node.selected text { fill:var(--accent-red); font-weight:600; }
.graph-edge { stroke:var(--accent-gold); stroke-width:1.5px; fill:none; cursor:pointer; }
.graph-edge:not(.formal) { stroke-dasharray:4 5; opacity:.65; }
.graph-edge:hover,.graph-edge:focus { stroke:var(--accent-red); stroke-width:4; opacity:1; }
.canvas-controls { position:absolute; right:16px; bottom:42px; display:flex; gap:4px; align-items:center; background:var(--bg-surface); }
.canvas-controls output { min-width:45px; text-align:center; font-size:11px; }
.canvas-legend { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); padding:12px; border-top:1px solid var(--border-subtle); }
.legend-dot::before,.legend-source::before { content:'○'; color:var(--accent-blue); padding-right:4px; }
.legend-source::before { color:var(--accent-blue); }
.legend-shared::before { content:'●'; color:var(--accent-gold); padding-right:4px; }
.node-detail { background:var(--bg-surface-solid); border-top:2px solid var(--accent-blue); padding:24px; max-height:850px; overflow:auto; scroll-margin-top:20px; box-shadow:var(--shadow-card); }
.node-detail h2 { font:500 27px/1.55 var(--font-serif); margin:10px 0 18px; overflow-wrap:anywhere; }
.node-detail>p { font:14px/1.9 var(--font-sans); color:var(--text-muted); overflow-wrap:anywhere; }
.node-meta { font-size:10px!important; color:var(--accent-blue)!important; }
.node-detail .connections { margin-top:22px; }
.node-detail .connections h3 { font-size:20px; }
.node-detail>a { margin-right:14px; }
.graph-directory { margin-top:24px; }
.directory-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.directory-heading h2 { font:500 21px/1.7 var(--font-serif); }
.directory-heading span { font-size:11px; color:var(--text-muted); }
#node-list { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; margin-top:14px; }
#node-list button { text-align:left; border:0; border-bottom:1px solid var(--border-subtle); padding:15px 0; border-radius:0; overflow-wrap:anywhere; }
#node-list small { display:block; color:var(--text-muted); margin-bottom:5px; }
#node-list button[aria-pressed=true] { color:var(--accent-red); }
.pagination { display:flex; gap:20px; justify-content:center; align-items:center; margin-top:20px; font-size:11px; }
.graph-footer { display:grid; grid-template-columns:1fr 1fr; gap:70px; border-top:1px solid var(--border-subtle); padding-top:32px; margin-top:50px; font:13px/1.9 var(--font-sans); color:var(--text-muted); }
.graph-footer h2 { font:500 23px/1.7 var(--font-serif); color:var(--text-ink); margin-bottom:12px; }
.graph-footer summary { cursor:pointer; color:var(--accent-blue); }
.graph-footer a { color:var(--accent-red); }
@media(max-width:1000px) { .graph-main { padding-inline:28px; } .graph-layout { grid-template-columns:minmax(0,1fr) 300px; gap:18px; } .graph-intro { max-width:310px; } }
@media(max-width:760px) { .graph-main { padding:28px 20px 40px; } .graph-heading { display:block; padding-bottom:22px; } .graph-heading h1 { font-size:36px; } .graph-intro { margin-top:22px; max-width:none; } .research-counts { gap:32px; margin-top:16px; } .research-counts strong { font-size:26px; } .graph-kicker { margin-bottom:15px; } .graph-starts { gap:12px 17px; } .graph-starts>span { width:100%; } .graph-tools { gap:14px; } .graph-tools>label { flex:1 1 100%; justify-content:space-between; } .graph-tools>label.claim-toggle { flex:1; justify-content:flex-start; } .graph-tools select,.graph-tools input[type=search] { width:210px; } .graph-layout { display:flex; flex-direction:column; gap:24px; } .graph-column,.node-detail { width:100%; } #network { height:380px; } .canvas-heading { left:16px; top:14px; } .canvas-heading strong { font-size:17px; } .canvas-legend { font-size:12px; gap:7px; } .node-detail { max-height:none; padding:20px; } #node-list { grid-template-columns:1fr; } .graph-footer { grid-template-columns:1fr; gap:24px; margin-top:36px; } .graph-page .nav-links { display:none; } .graph-page .nav-links.is-open { display:flex; } .graph-page .nav-menu-btn { display:flex; } .graph-page .site-nav { padding-inline:20px; } }
@media(max-width:760px) { .canvas-controls { position:static; justify-content:flex-end; padding:0 12px 8px; background:var(--bg-surface-solid); } }
.explore-history { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:38px; margin-bottom:16px; }
.explore-history > #explore-back { margin-right:auto; }
.explore-feedback { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.graph-live-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.graph-node circle { transition:fill .25s,stroke-width .25s; }
.graph-node:hover circle { stroke-width:4px; }
.graph-page button { transition:background-color .2s,color .2s; }
.graph-page button:not(:disabled):hover { background:var(--bg-paper); color:var(--accent-red); }
.node-detail { scroll-margin-top:88px; }
@media(max-width:760px) {
  .explore-history { gap:8px; }
  #network { touch-action:pan-y; }
  .graph-layout { overflow-anchor:none; }
}
.graph-node { pointer-events:bounding-box; }
.graph-node:focus { outline:none; }
.graph-node:focus-visible circle { stroke-width:4px; }
.graph-node.previous-node circle { stroke-dasharray:3 2; stroke-width:2.5px; }