/* Topology workspace. Node width and port coordinates match SC's geometry. */
#content:has(>.schema-nav){--schema-accent:#79c6e8}
#content>.schema-nav,#content>#scWrap{max-width:none}
#content>.schema-nav{margin:8px 0 18px;gap:16px;flex-wrap:wrap}
.schema-nav .vtabs{display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.schema-nav .vtab{min-height:38px;padding:9px 15px;border:1px solid transparent;border-radius:9px;color:var(--ink-3);font-size:13px;display:flex;align-items:center;gap:8px}
.schema-nav .vtab.on{background:rgba(121,198,232,.09);border-color:rgba(121,198,232,.2);color:var(--ink-hi);box-shadow:none}
.schema-nav .vtab.on svg{color:var(--schema-accent)}
.schema-nav .vtab::after{display:none}
.schema-nav .note{font-size:12px;color:var(--ink-3)}
#content>#scWrap{min-height:650px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
#scWrap .sc-root{--accent:#79c6e8;--accent-hi:#a1daf1;--accent-text:#79c6e8;--accent-soft:rgba(121,198,232,.1);background:var(--bg)}
#scWrap .sc-tb{padding:16px 20px;gap:10px;background:var(--surface);border-bottom:1px solid var(--line)}
#scWrap .sc-tb .t{font-size:15px;font-weight:600}
#scWrap .sc-tb .t svg{color:var(--accent);width:19px;height:19px}
#scWrap #scMeta{font-size:12px;color:var(--ink-3)}
#scWrap .btn{min-height:36px;border-radius:10px;box-shadow:none;font-size:12px;padding:8px 12px}
#scWrap .btn.primary{background:var(--accent);border-color:transparent;color:#102a36}
#scWrap #scLink{background:rgba(121,198,232,.08);border-color:rgba(121,198,232,.25);color:var(--ink-hi)}
#scWrap .sc-stage{background:radial-gradient(ellipse at 35% 25%,rgba(121,198,232,.055),transparent 65%),var(--bg);min-width:0}
#scWrap .sc-stage #scWorld{background-image:radial-gradient(var(--line) 1px,transparent 1px)}
#scWrap .scn{width:196px;background:var(--surface);border-radius:15px;border-color:var(--line-strong);box-shadow:0 6px 18px rgba(0,0,0,.16)}
#scWrap .scn:hover{border-color:var(--accent)}
#scWrap .scn.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(121,198,232,.12),0 8px 24px rgba(0,0,0,.2)}
#scWrap .scn .h{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:13px 12px 11px;align-items:start}
#scWrap .scn .h>div:nth-child(2){min-width:0}
#scWrap .scn .tt{font-size:13px;line-height:1.4;font-weight:600;overflow-wrap:anywhere}
#scWrap .scn .ss{font-size:10px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
#scWrap .scn .rl{grid-column:2;justify-self:start;margin:0;font-size:9px;letter-spacing:.07em;padding:3px 6px}
#scWrap .scn .b{border-top:1px solid var(--line-faint);padding:11px 12px 12px;gap:9px}
#scWrap .scn .m{font-size:11px;gap:6px}
#scWrap .scn .cp{font-size:10px;line-height:1.4;font-weight:500;background:var(--surface-2);border-color:var(--line-faint);padding:3px 5px}
#scWrap .scp{border-color:var(--ink-3);background:var(--surface)}
#scWrap .scn.sel .scp,#scWrap .scn:hover .scp{border-color:var(--accent)}
#scWrap .sc-insp{width:340px;background:var(--surface);border-left:1px solid var(--line);scrollbar-width:thin}
#scWrap .sc-insp .ih{padding:22px 20px 18px;background:rgba(121,198,232,.035);border-bottom:1px solid var(--line)}
#scWrap .sc-insp .ih .t{font-size:16px;font-weight:600;line-height:1.5}
#scWrap .sc-insp .ih .s{font-size:12px;line-height:1.6;margin-top:5px;overflow-wrap:anywhere}
#scWrap .sc-insp .ib{padding:20px;gap:20px}
#scWrap .sc-sec{font-size:10px;letter-spacing:.1em;margin:6px 0 9px;color:var(--ink-3)}
#scWrap .sc-kv{gap:0}
#scWrap .sc-kv>div{padding:9px 0;border-bottom:1px solid var(--line-faint);font-size:12px;line-height:1.6}
#scWrap .sc-kv>div>span{flex-basis:106px}
#scWrap .sc-kv>div>b{font-weight:500}
#scWrap .sc-insp .hint{font-size:12px;color:var(--ink-3);line-height:1.7}
#scWrap .sc-fg input,#scWrap .sc-fg select{min-height:38px;border-radius:10px}
#scWrap .sc-fg label{font-size:10px;letter-spacing:.08em}
#scWrap .sc-tg{background:var(--surface-2);border-radius:12px;padding:13px 12px;line-height:1.5}
#scWrap .sc-legend{max-width:calc(100% - 150px);gap:8px 13px;left:16px;bottom:16px;padding:10px 12px;border-radius:12px;font-size:10px;background:color-mix(in srgb,var(--surface) 90%,transparent)}
#scWrap .sc-legend .d{width:6px;height:6px;border-radius:50%}
#scWrap .sc-zoom{bottom:16px;right:16px;gap:5px}
#scWrap .sc-zoom button{width:34px;height:34px;background:var(--surface);border-color:var(--line);border-radius:10px}
#scWrap .sc-zoom button:hover{color:var(--accent);border-color:var(--accent)}
#scWrap .sc-hint{background:var(--surface);max-width:90%;line-height:1.5}
#scWrap :is(button,input,select):focus-visible,.schema-nav button:focus-visible{outline:2px solid #79c6e8;outline-offset:3px}
@media(max-width:1100px){#scWrap .sc-insp{width:290px}#scWrap .sc-tb>.grow{display:none}#scWrap .sc-tb .t{flex-basis:100%}}
@media(max-width:760px){
 #content>.schema-nav{gap:8px}.schema-nav>.grow{display:none}.schema-nav .note{width:100%}
 .schema-nav .vtabs{max-width:100%;overflow-x:auto}.schema-nav .vtab{font-size:12px;padding:9px 10px;white-space:nowrap}
 #content>#scWrap{min-height:920px}
 #scWrap .sc-tb{padding:12px;gap:6px}#scWrap .sc-tb .btn{padding:7px 9px;font-size:11px}
 #scWrap .sc-body{flex-direction:column}
 #scWrap .sc-stage{min-height:420px}
 #scWrap .sc-insp{width:100%;height:300px;border-left:0;border-top:1px solid var(--line)}
 #scWrap .sc-legend{max-width:calc(100% - 24px);left:12px;bottom:56px;font-size:9px;padding:8px;gap:5px 8px}
 #scWrap .sc-zoom{bottom:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){#scWrap *{transition:none!important}}