/*
 * 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:calc(100vh - 190px);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{display:flex;gap:6px;margin-left:auto;align-items:center}
.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-wrap{flex:1;min-height:0;position:relative;overflow:hidden;margin:0 12px;border:1px solid rgba(255,255,255,0.07);border-radius:10px}
#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}