/*
 * public/m33-static/proto-class-graph.css — the class catalog graph
 * (lib/views/htmls/proto/class-graph.ejs; ADR 0082 D6, rule 10a).
 *
 * Served from /m33/ by every host that renders it: the Proto host, Bud and
 * Turing. Rules unchanged from the <style> block lib/proto/class-graph.js
 * used to inject; the discipline tokens and the 3D chrome stay in shell.css.
 */
#m33-cg{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:var(--m33-text,#e6e9f2)}
#m33-cg-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px 8px}
#m33-cg-head h1{font-size:16px;font-weight:600;margin:0}
#m33-cg-head .sub{font-size:12px;color:var(--m33-text-muted,#8a93a6)}
#m33-cg-tools{position:absolute;top:10px;right:10px;z-index:4;display:flex;gap:4px;align-items:center;padding:4px;background:var(--m33-panel);border:1px solid var(--m33-border);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.m33-cg-btn{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);color:var(--m33-text,#e6e9f2);cursor:pointer;font:600 11px/1 system-ui,sans-serif;padding:6px 10px;border-radius:7px}
.m33-cg-btn:hover{background:rgba(255,255,255,0.1)}
.m33-cg-btn.on{background:rgba(74,134,255,0.22);border-color:rgba(74,134,255,0.6)}
#m33-cg-tabs{display:flex;flex-direction:column;gap:2px}
/* the 3D filters: a floating panel at the graph's top left that folds to its summary; gone outside 3D */
#m33-cg-filters{position:absolute;top:10px;left:10px;z-index:4;max-width:min(520px,calc(100% - 20px));background:var(--m33-panel);border:1px solid var(--m33-border);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
#m33-cg-filters>summary{cursor:pointer;padding:6px 12px;font:600 12px/1.2 system-ui,sans-serif;color:var(--m33-text-muted);list-style:none}
#m33-cg-filters>summary::-webkit-details-marker{display:none}
#m33-cg-filters>summary::before{content:'\25B8';display:inline-block;margin-right:6px;transition:transform .15s}
#m33-cg-filters[open]>summary::before{transform:rotate(90deg)}
#m33-cg-filters[open]>summary{border-bottom:1px solid var(--m33-border)}
#m33-cg-filters #m33-cg-3dbar{padding:8px 10px}
#m33-cg-filters:has(#m33-cg-3dbar.m33-cg-off){display:none}
#m33-cg-wrap{flex:1;min-height:0;position:relative;overflow:hidden;margin:0;border:0;border-top:1px solid var(--m33-border);border-radius:0}
#m33-cg-svg{width:100%;height:100%;display:block;cursor:grab}
#m33-cg-svg.panning{cursor:grabbing}
.m33-cg-cluster{fill:rgba(255,255,255,0.02);stroke:rgba(255,255,255,0.09)}
.m33-cg-clabel{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;fill:var(--m33-text-muted,#8a93a6)}
.m33-cg-node{cursor:pointer}
.m33-cg-node text{font-size:11px;fill:var(--m33-text,#e6e9f2)}
.m33-cg-node.anchor text{fill:var(--m33-text-muted,#8a93a6);font-style:italic}
.m33-cg-node .w{font-size:9px;fill:var(--m33-text-muted,#8a93a6)}
.m33-cg-node .w.inh{fill:#4a86ff;font-weight:700}
.m33-cg-node .fld{font-size:9.5px;fill:var(--m33-text-muted,#9fb0d0)}
.m33-cg-node rect.bx{fill:rgba(20,25,38,0.92);stroke:rgba(159,176,208,0.5);stroke-width:1.1}
.m33-cg-node.planned rect.bx{stroke-dasharray:4 3;stroke:rgba(159,176,208,0.38)}
.m33-cg-node rect.hd{stroke:none}
.m33-cg-node.instance rect.hd{fill:rgba(74,134,255,0.30)}
.m33-cg-node.procedural rect.hd{fill:rgba(74,134,255,0.13)}
.m33-cg-node.planned rect.hd{fill:rgba(255,255,255,0.03)}
.m33-cg-node.anchor rect.bx{stroke:rgba(138,147,166,0.3)}
.m33-cg-node.anchor rect.hd{fill:rgba(255,255,255,0.02)}
.m33-cg-edge{fill:none;stroke:rgba(159,176,208,0.4);stroke-width:1.2}
.m33-cg-edge.depends{stroke-dasharray:4 3}
.m33-cg-edge.isA{stroke:rgba(120,220,170,0.6);stroke-width:1.5}
#m33-cg.sel .m33-cg-edge{opacity:0.1}#m33-cg.sel .m33-cg-edge.hot{opacity:1;stroke:rgba(74,134,255,0.9)}
#m33-cg.sel .m33-cg-node{opacity:0.3}#m33-cg.sel .m33-cg-node.hot{opacity:1}
#m33-cg-detail{border-top:1px solid rgba(255,255,255,0.09);padding:10px 18px;min-height:84px;font-size:12px;line-height:1.55}
#m33-cg-detail .nm{font-weight:600;font-size:13px}
#m33-cg-detail .chips{margin-top:6px;max-height:96px;overflow:auto;display:flex;flex-wrap:wrap;gap:4px}
.m33-cg-chip{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid rgba(159,176,208,0.35);color:var(--m33-text,#e6e9f2);white-space:nowrap}
.m33-cg-chip.sub{opacity:0.6}
#m33-cg-detail .muted{color:var(--m33-text-muted,#8a93a6)}
#m33-cg-detail code{background:rgba(255,255,255,0.06);border-radius:4px;padding:1px 5px;font-size:11px}
.m33-cg-st{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px}
.m33-cg-st.instance{color:#57c98a;border:1px solid #57c98a66}
.m33-cg-st.procedural{color:#c9a227;border:1px solid #c9a22766}
.m33-cg-st.planned{color:#8a93a6;border:1px solid #8a93a655}
#m33-cg-legend{display:flex;gap:16px;flex-wrap:wrap;padding:6px 18px 10px;font-size:11px;color:var(--m33-text-muted,#8a93a6)}
.m33-cg-arc{fill:none;stroke:rgba(87,201,138,0.16);stroke-width:2;stroke-dasharray:6 5}
.m33-cg-arc.live{stroke:rgba(87,201,138,0.85);animation:m33flow 1.4s linear infinite}
@keyframes m33flow{to{stroke-dashoffset:-22}}
.m33-cg-node.beat circle:first-of-type{filter:drop-shadow(0 0 5px rgba(87,201,138,0.9))}
.m33-cg-node .beatn{font-size:9px;fill:#57c98a;font-weight:700}
.m33-cg-obj text{font-size:10.5px;text-decoration:underline;fill:var(--m33-text,#e6e9f2)}
.m33-cg-obj rect{fill:rgba(20,25,38,0.92);stroke:rgba(87,201,138,0.4);rx:4}
.m33-cg-obj.declared rect{stroke:rgba(74,134,255,0.5)}
.m33-cg-obj.grown rect{stroke:rgba(201,162,39,0.6)}
.m33-cg-olink{stroke:rgba(87,201,138,0.45);stroke-width:1.1;fill:none}
#m33-cg.sel .m33-cg-obj{opacity:0.22}#m33-cg.sel .m33-cg-obj.hot{opacity:1}
#m33-cg.sel .m33-cg-obj.hot rect{stroke:#57c98a;stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(87,201,138,0.7))}
#m33-cg.sel .m33-cg-olink{opacity:0.08}#m33-cg.sel .m33-cg-olink.hot{opacity:1;stroke:rgba(87,201,138,0.95);stroke-width:1.8}

/* the 3D instance graphs fill the canvas like the 3D catalog */
#m33-cg-mind3d{position:absolute;inset:0}
#m33-cg-mind3d[hidden],#m33-cg-bodyfig[hidden]{display:none}
#m33-cg-bodyfig{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;height:auto;border:0;border-radius:0}   /* fills the canvas: not the Body page's fixed-height frame */
#m33-cg-bodyfig .m33-body-kin-canvas{flex:1;min-height:0}
#m33-cg-detail .m33-cg-rels{margin-top:4px}