/* Rheum–Derm Immune Atlas systems explorer presentation.
 * Shared palette and typography tokens remain owned by the atlas shell.
 */

.network-shell{position:relative;height:690px;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:#0c110d}#network3d{width:100%;height:100%;display:block;cursor:grab;outline:none}#network3d[data-cursor="pointer"]{cursor:pointer}#network3d[data-gesture="rotate"]{cursor:grabbing}#network3d[data-gesture="pan"]{cursor:move}#network3d:focus-visible{box-shadow:inset 0 0 0 4px var(--graph-focus-ring)}.network-overlay{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.network-overlay>*{pointer-events:auto}.node-info{position:absolute;bottom:12px;left:12px;max-width:410px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);padding:12px}.node-info h4{margin:0 0 4px}.node-info p{margin:0;color:var(--muted);font-size:12px}.network-help{position:absolute;z-index:5;bottom:12px;right:12px;color:var(--muted);font-size:11px;background:var(--panel);border:1px solid var(--line);padding:7px 9px;border-radius:var(--r-2)}
.network-panel{padding:16px}.network-titlebar{align-items:center}.network-mode-switch{display:inline-flex;border:1px solid var(--line);background:var(--bg2);border-radius:var(--r-2);padding:3px}.network-mode-switch button{border:0;background:transparent;color:var(--muted);padding:7px 10px;border-radius:var(--r-1);cursor:pointer}.network-mode-switch button.active{background:var(--accent);color:var(--accent-ink);font-weight:800}.network-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}.network-toolbar .control{min-width:145px}.network-axis-note{font-size:11px;color:var(--muted);border-left:3px solid var(--accent2);background:var(--panel2);padding:8px 10px;border-radius:0;margin-bottom:5px}.network-selection-status{min-height:25px;margin:0 0 10px;padding:3px 8px;border-left:3px solid var(--graph-focus-ring);color:var(--muted);font-size:11px}.network-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:stretch}.network-shell{height:760px;background:#0c110d;border-color:var(--line);box-shadow:none}html[data-theme="light"] .network-shell{background:#edf0e9}.network-sidebar{border:1px solid var(--line);border-radius:var(--r-2);background:var(--panel);padding:12px;overflow:auto;max-height:760px;display:grid;align-content:start;gap:16px}.network-sidebar .node-info{position:static;max-width:none;background:var(--panel2)}.node-info h4{font-size:17px}.node-info .node-summary{color:var(--muted);font-size:12px}.network-relations{display:grid;gap:8px;margin-top:8px}.network-relation-group{border:1px solid var(--line);background:var(--bg2)}.network-relation-group summary{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;color:var(--text);font-size:11px;font-weight:800;cursor:pointer}.network-relation-group-list{display:grid;gap:5px;padding:0 6px 7px}.network-relation{position:relative;width:100%;border:1px solid var(--line);border-left:4px solid var(--edge-color,var(--line));background:var(--panel2);border-radius:var(--r-2);padding:8px;text-align:left;color:var(--text);cursor:pointer}.network-relation:hover,.network-relation:focus-visible{border-color:var(--graph-focus-ring);outline:2px solid var(--graph-focus-ring);outline-offset:1px}.network-relation small{display:block;color:var(--muted);font-size:10px}.network-legend{display:grid;gap:9px;margin-top:8px;font-size:11px;color:var(--muted)}.legend-group{border-top:1px solid var(--line);padding-top:8px}.legend-group:first-child{border-top:0;padding-top:0}.legend-row{--swatch-color:var(--line);display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center;margin:5px 0;color:var(--muted)}.shape-demo{width:18px;height:18px;margin-left:4px;border:2px solid var(--swatch-color);background:color-mix(in srgb,var(--swatch-color) 35%,var(--panel))}.shape-demo.circle{border-radius:50%}.shape-demo.diamond{transform:rotate(45deg);width:15px;height:15px}.shape-demo.square{border-radius:var(--r-2)}.shape-demo.hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.edge-demo{height:0;border-top:3px solid var(--swatch-color);position:relative}.edge-demo.arrow:after{content:"";position:absolute;right:-1px;top:-5px;border-left:7px solid var(--swatch-color);border-top:4px solid transparent;border-bottom:4px solid transparent}.edge-demo.dashed{border-top-style:dashed}.edge-demo.inhibit:after{content:"";position:absolute;right:0;top:-7px;width:2px;height:11px;background:var(--swatch-color)}.network-view-controls{position:absolute;z-index:6;top:12px;left:12px;display:flex;gap:5px;flex-wrap:wrap;max-width:70%}.network-stats{position:absolute;z-index:6;top:12px;right:12px;background:#151b16;border:1px solid var(--line);border-radius:var(--r-2);padding:7px 9px;color:var(--muted);font-size:10px}html[data-theme="light"] .network-stats{background:#fffefa;color:#38453c}.network-help{max-width:72%;line-height:1.35}.network-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.network-mini-grid div{border:1px solid var(--line);border-radius:var(--r-2);padding:7px;background:var(--bg2)}.network-mini-grid small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em}.network-mini-grid b{font-size:12px}.network-ref-list{margin-top:8px}.network-ref-list .refchips{margin-top:4px}.network-badge{--badge-color:var(--line);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-2);padding:3px 7px;font-size:10px;color:var(--text)}.network-badge::before{content:"";width:10px;height:10px;background:var(--badge-color);border:1px solid var(--graph-neutral-keyline)}
.network-focus-labels{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}.network-focus-label{position:absolute;pointer-events:auto;min-height:24px;max-width:180px;padding:3px 7px;border:1px solid var(--graph-label-border);border-left:4px solid var(--node-color,var(--graph-label-border));border-radius:2px;background:var(--graph-label-surface);color:var(--graph-label-text);font:700 10px/1.2 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:translate3d(0,0,0)}.network-focus-label:hover,.network-focus-label:focus-visible{outline:3px solid var(--graph-focus-ring);outline-offset:2px}.network-focus-label small{display:block;color:var(--graph-label-muted);font:600 8px/1.1 var(--font-mono)}.network-focus-selected{border-width:2px;border-left-width:5px;box-shadow:0 0 0 2px var(--graph-focus-ring)}.network-connected-tray{display:none}.network-connected-tray-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.network-connected-tray-head>span:last-child{color:var(--muted);font-size:10px}.network-connected-tray-list{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain;padding:7px 1px 3px}.network-connected-tray-list button{flex:0 0 auto;min-height:44px;max-width:210px;border:1px solid var(--line);border-left:4px solid var(--node-color,var(--line));background:var(--panel2);color:var(--text);padding:7px 9px;text-align:left}.network-connected-tray-list button small{display:block;color:var(--muted);font-size:9px}
.network-advanced-controls{flex-basis:100%;border-block:1px solid var(--line);background:var(--panel2)}.network-advanced-controls summary{min-height:44px;display:flex;align-items:center;padding:0 10px;color:var(--text);font-size:12px;font-weight:800;cursor:pointer}.network-advanced-controls summary::marker{color:var(--accent)}.network-advanced-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 10px 10px}.network-advanced-grid label{display:grid;gap:4px;color:var(--muted);font-size:10px}.network-advanced-grid .control{width:100%;min-width:0}.network-mobile-navigator,.mobile-pan-controls{display:none}
@media(max-width:1200px){.network-workspace{grid-template-columns:1fr}.network-sidebar{max-height:none;grid-template-columns:repeat(3,minmax(0,1fr))}.network-sidebar>section{min-width:0}.matrix-inspector{position:static}}
@media(max-width:760px){.network-panel{padding:12px}.network-titlebar h3{font-size:20px}.network-mode-switch{width:100%;display:grid;grid-template-columns:1fr 1fr;padding:0}.network-mode-switch button{min-height:52px;padding:7px}.network-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.network-toolbar .control{min-width:0;width:100%;font-size:16px}.network-toolbar #networkCondition,.network-toolbar #networkSearch,.network-toolbar #networkAdvancedControls,.network-toolbar #networkTour{grid-column:1/-1}.network-toolbar .btn{width:100%;min-height:44px}.network-advanced-grid{grid-template-columns:1fr}.network-axis-note{font-size:12px;line-height:1.5}.network-selection-status{font-size:12px}.network-mobile-navigator{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--panel2);padding:10px;margin:0 0 10px}.network-mobile-navigator>div{grid-column:1/-1}.network-mobile-navigator strong{display:block;margin-top:3px;font-size:12px}.network-mobile-navigator label{display:grid;gap:4px;color:var(--muted);font-size:10px}.network-mobile-navigator .control{min-width:0;width:100%;font-size:16px}.network-connected-tray:not([hidden]){display:block;border:1px solid var(--line);background:var(--panel);padding:9px;margin:0 0 10px;max-width:100%;overflow:hidden}.network-shell{height:min(58vh,470px);min-height:390px}.network-sidebar{display:grid;grid-template-columns:1fr;padding:10px;gap:12px}.network-view-controls{display:grid;grid-template-columns:1fr 1fr;left:8px;right:8px;max-width:none}.network-view-controls .btn{min-height:40px}.network-stats{top:auto;bottom:8px;right:8px}.network-help{display:none}.network-focus-label{min-height:18px;max-width:104px;padding:2px 4px;font-size:8px}.network-focus-label small{display:none}.network3d,#network3d{touch-action:none}.matrix-shell canvas{height:520px}.relation-meta{grid-template-columns:1fr}.mobile-pan-controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:8px 0}.mobile-pan-controls span{text-align:center;color:var(--muted);font:700 10px/1.3 var(--font-mono)}.mobile-pan-controls .btn{min-height:44px}.triptych-headings{min-width:960px}.triptych-svg-shell{scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}.triptych-facet{scroll-snap-align:start}.triptych-svg-shell svg{height:590px}.triptych-legend{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}.triptych-legend span{min-width:max-content}.story-steps{grid-template-columns:1fr}.story-step{border-right:0;border-bottom:1px solid var(--line);min-height:88px}.story-step:last-child{border-bottom:0}}
@media print{.network-sidebar{display:block;max-height:none}.network-shell{height:520px}.matrix-shell{overflow:visible}.matrix-shell canvas{min-width:0;width:100%}}
.triptych-toolbar{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:10px}.triptych-toolbar label{display:grid;gap:4px;color:var(--muted);font-size:10px}.triptych-frame{border:1px solid var(--line);background:var(--bg2)}.triptych-headings{display:grid;grid-template-columns:1fr 1fr 1fr;min-width:960px;border-bottom:1px solid var(--line)}.triptych-facet{min-height:58px;padding:10px 14px;border-right:1px solid var(--line)}.triptych-facet:last-child{border-right:0}.triptych-facet span{display:block;color:var(--faint);font:700 9px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.triptych-facet b{display:block;margin-top:5px;font-size:14px}.triptych-svg-shell{overflow:auto}.triptych-svg-shell svg{display:block;max-width:none;min-width:960px;width:100%;height:640px}.triptych-edge{fill:none;stroke-width:1.6}.triptych-edge.direct{stroke:var(--good)}.triptych-edge.derived{stroke:var(--accent2);stroke-dasharray:6 5}.triptych-edge.context{stroke:var(--muted);stroke-width:1.2}.triptych-node rect,.triptych-node circle{fill:var(--panel);stroke:var(--line);stroke-width:1.4}.triptych-node.active rect,.triptych-node.active circle{stroke:var(--accent);stroke-width:2.4}.triptych-node text{fill:var(--text);font:600 11px IBM Plex Sans}.triptych-node .triptych-node-meta{fill:var(--muted);font:9px IBM Plex Mono}.triptych-waypoint rect{fill:var(--bg2);stroke:var(--line)}.triptych-waypoint text{fill:var(--muted);font:8px IBM Plex Mono}.triptych-legend{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0;color:var(--muted);font-size:10px}.triptych-legend span{display:inline-flex;align-items:center;gap:6px}.triptych-line{display:inline-block;width:27px;border-top:2px solid}.triptych-line.direct{border-color:var(--good)}.triptych-line.derived{border-color:var(--accent2);border-top-style:dashed}.triptych-waypoint-demo{width:14px;height:10px;border:1px solid var(--line);background:var(--bg2)}.storyboard{border-top:1px solid var(--line);padding-top:13px;margin-top:12px}.storyboard-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.storyboard-head h4{font-size:16px}.story-controls{display:flex;gap:7px;flex-wrap:wrap}.story-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:12px;border:1px solid var(--line)}.story-step{min-height:112px;padding:11px;border-right:1px solid var(--line);background:var(--panel2)}.story-step:last-child{border-right:0}.story-step.active{box-shadow:inset 0 3px 0 var(--accent);background:var(--bg2)}.story-step.unsupported{opacity:.62}.story-step small{display:block;color:var(--faint);font:700 9px/1.2 var(--font-mono);text-transform:uppercase}.story-step b{display:block;margin:8px 0 4px;font-size:12px}.story-step span{color:var(--muted);font-size:10px}.story-status{border-left:3px solid var(--accent);padding:8px 10px;margin-top:10px;background:var(--panel2);color:var(--muted);font-size:11px}
.triptych-node text{font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600}.triptych-node .triptych-node-meta{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:400}.triptych-waypoint text{font-family:"IBM Plex Mono",monospace;font-size:8px}
.triptych-frame,.triptych-svg-shell{max-width:100%}.triptych-frame{overflow:hidden}
.network-view-controls .btn.active{border-color:var(--accent);background:var(--panel2);color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}
.network-focus-label{max-width:280px}
@media(max-width:760px){.network-focus-label{max-width:104px}}