/* network-hub.css: agents writing to one shared log. Tokens only, so every theme works. */
.nh{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:var(--ar,1000 / 560);border:1px solid var(--border);border-radius:24px;background:
  radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--border-strong,var(--border)) 55%,transparent) 1px,transparent 1.5px) 0 0/22px 22px,var(--surface);box-shadow:var(--app-shadow,var(--shadow-1));container-type:inline-size}
.nh::before{content:"";position:absolute;inset:-5px;border:1.5px solid var(--fun-teal,var(--brand));opacity:.35;border-radius:27px 30px 26px 29px / 29px 26px 30px 27px;transform:rotate(-.3deg);pointer-events:none}
.nh-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nh-line{stroke:var(--border-strong,var(--border));stroke-width:1.5;stroke-linecap:round;opacity:.9;transition:stroke .25s ease,stroke-width .25s ease}
.nh-line[data-hot="true"]{stroke:var(--fun-teal,var(--brand));stroke-width:2}
.nh-dot{fill:var(--fun-teal,var(--brand));stroke:var(--surface);stroke-width:2.5}
.nh-dot[data-tone="amber"]{fill:var(--fun-amber,var(--warning))}
.nh-nodes{position:absolute;inset:0}
.nh-node{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 10px #00000010;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;min-width:0}
.nh-node img{width:28px;height:28px;border-radius:7px;object-fit:contain;flex:none}
.nh-you{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 10px/1 var(--font-mono);background:var(--warning-subtle,var(--surface-sunken));color:var(--warning,var(--text));border:1.5px solid var(--fun-amber,var(--warning))}
.nh-node-text{display:grid;min-width:0;line-height:1.25}
.nh-node-text strong{font:600 14px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--text)}
.nh-role{font:500 11px/1.3 var(--font-mono);color:var(--text-subtle)}
.nh-wait{display:none;font:600 11px/1.3 var(--font-mono);color:var(--warning)}
.nh-node[data-state="active"]{border-color:var(--fun-teal,var(--brand));box-shadow:0 0 0 4px color-mix(in srgb,var(--fun-teal,var(--brand)) 14%,transparent),0 4px 16px #00000014;transform:translate(-50%,-50%) translateY(-2px)}
.nh-node[data-state="waiting"]{border-color:var(--fun-amber,var(--warning));box-shadow:0 0 0 4px color-mix(in srgb,var(--fun-amber,var(--warning)) 18%,transparent)}
.nh-node[data-state="waiting"] .nh-role{display:none}
.nh-node[data-state="waiting"] .nh-wait{display:block}
/* the log */
.nh-ledger{position:absolute;left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh);display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--fun-teal,var(--brand));border-radius:20px;box-shadow:var(--app-shadow,var(--shadow-1)),0 0 0 6px color-mix(in srgb,var(--fun-teal,var(--brand)) 8%,transparent);overflow:hidden}
.nh-ledger-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-sunken)}
.nh-ledger-head div{display:grid;min-width:0}
.nh-ledger-head strong{font:600 15px/1.3 var(--font-display);letter-spacing:-.015em}
.nh-ledger-head span{font:500 11px/1.4 var(--font-mono);color:var(--text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nh-events{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 12px;overflow:hidden}
.nh-event{grid-template-columns:44px 3px minmax(0,1fr);gap:0 10px;padding:9px 0;min-height:0;border-bottom:1px dashed var(--border)}
.nh-event:last-child{border-bottom:0}
.nh-event .lm-event-time{font-size:11px;text-align:left}
.nh-event .lm-event-summary{font-size:13px;line-height:1.4;color:var(--text)}
.nh-event .lm-kind{font-size:11px}
.nh-event .lm-title-3{font:600 12px/16px var(--font-mono);color:var(--text-muted)}
.nh-event[data-new="true"]{animation:nh-in .45s cubic-bezier(.2,0,0,1)}
@keyframes nh-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.nh-ledger-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--border);font:500 11px/1.4 var(--font-mono);color:var(--text-subtle)}
.nh-slots{margin-left:auto}
.nh-pause{font:600 11px/1 var(--font-mono);padding:6px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-muted);cursor:pointer}
.nh-pause:hover{border-color:var(--fun-teal,var(--brand));color:var(--text)}
.nh-pause:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nh-pause[hidden]{display:none}
/* phone layout: agents above, builders and the person below, the log between */
.nh[data-layout="tall"]{border-radius:20px}
.nh[data-layout="tall"] .nh-node{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:9px 6px;border-radius:14px}
.nh[data-layout="tall"] .nh-node-text{justify-items:center}
.nh[data-layout="tall"] .nh-node-text strong{font-size:13px}
.nh[data-layout="tall"] .nh-node img,.nh[data-layout="tall"] .nh-you{width:24px;height:24px}
.nh[data-layout="tall"] .nh-ledger-head span{display:none}
.nh[data-layout="tall"] .nh-event .lm-event-summary{font-size:12.5px}
.nh[data-layout="tall"] .nh-slots{display:none}
.nh[data-layout="tall"] .nh-pause{margin-left:auto}
@media (prefers-reduced-motion:reduce){.nh-event[data-new="true"]{animation:none}.nh-node,.nh-line{transition:none}}
/* dark themes: the two black marks and the log mark need their light versions */
:root[data-theme="dark"] .nh-node img[src$="chatgpt.svg"],:root[data-theme="dark"] .nh-node img[src$="codex.svg"]{filter:invert(1)}
:root[data-theme="dark"] .nh-ledger-head img{content:url("/ds/logos/logmem-symbol-reversed.svg")}

/* Homepage: reserve the space before the script draws the hub, so the page does not jump. */
.network-hub-wrap{margin:40px auto 56px;max-width:1040px}
[data-network-hub]:empty,.network-hub-wrap:not(.nh){aspect-ratio:1000 / 560}
@media (max-width:760px){[data-network-hub]:empty,.network-hub-wrap:not(.nh){aspect-ratio:360 / 700}.network-hub-wrap{margin:28px auto 40px}}
.network-hub-wrap.nh{margin:40px auto 56px}