@nelsonlongxiang/dsh-open-a2a-net 0.6.41 → 0.6.42

package/nexus-stage/src/planning.css

@@ -1,340 +1,340 @@
-/* Planning mode (2D infinite canvas) — ported from the approved wireframe
-   (feedback/2026-08-27-nexus-canvas-ux/prototype-v1.html) with the design
-   system's three-layer token discipline. Tokens are scoped to #dsh-plan
-   (token sovereignty: the stage owns its theme, detached from any host).
-   Deviations from the prototype, all for computable geometry:
-   - .frame-head is horizontally centered with a fixed 24px border-box
-     height, so the star-edge origin is exactly (fx + fw/2, fy + 11);
-   - .node has a fixed 56px border-box height matching world.NODE_H, with
-     nowrap/ellipsis so the card can never outgrow the edge math.
-   Layers (z): grid 0 < world 1 < marquee 2 < HUD 3. */
-
-#dsh-plan *,#dsh-plan *::before,#dsh-plan *::after{box-sizing:border-box}
-
-#dsh-plan{
-  /* primitive — bound to the workbench tokens (--n-*, workbench.css) so the
-     board follows the same dark/light theme as the rail; the literal after
-     each comma is the stage's own dark value, kept so the board still
-     renders on a host that ships without workbench.css (token sovereignty). */
-  --uupm-ink-0:var(--n-ink,#dde3f0); --uupm-ink-1:var(--n-ink-muted,#7a86a0);
-  --uupm-bg-0:var(--n-bg,#060a12); --uupm-bg-1:var(--n-panel,#0d1322); --uupm-bg-2:var(--n-raised,#131b2e);
-  --uupm-accent:var(--n-accent,#9673f7); --uupm-live:var(--n-live,#4ade80); --uupm-cold:var(--n-cold,#7a86a0);
-  --uupm-edge-member:var(--n-canvas,#22d3ee);
-  --uupm-warn:var(--n-act,#f59e0b); --uupm-error:var(--n-danger,#f87171); --uupm-indigo:var(--n-federal,#6366f1);
-  /* accent washes (hover 8% / active 12-18% / tint 5-10%), one definition each */
-  --uupm-wash-5:color-mix(in srgb,var(--uupm-accent) 5%,transparent);
-  --uupm-wash-8:color-mix(in srgb,var(--uupm-accent) 8%,transparent);
-  --uupm-wash-12:color-mix(in srgb,var(--uupm-accent) 12%,transparent);
-  --uupm-wash-15:color-mix(in srgb,var(--uupm-accent) 15%,transparent);
-  --uupm-wash-18:color-mix(in srgb,var(--uupm-accent) 18%,transparent);
-  /* semantic */
-  --surface:var(--uupm-bg-1); --ink:var(--uupm-ink-0); --ink-muted:var(--uupm-ink-1);
-  --accent:var(--uupm-accent); --edge-live:var(--uupm-live); --edge-cold:var(--uupm-cold);
-  --federal:var(--uupm-indigo);
-  /* component */
-  --card-bg:var(--surface); --card-line:var(--n-card-line,#5c6680); --card-line-hover:var(--uupm-ink-1);
-  --toolbar-bg:color-mix(in srgb,var(--uupm-bg-1) 92%,transparent);
-  --grid-dot:color-mix(in srgb,var(--uupm-ink-1) 22%,transparent);
-  --scrim:color-mix(in srgb,var(--uupm-bg-0) 60%,transparent);
-  --error-ink:var(--n-error-ink,#fecaca); --error-panel:var(--n-error-panel,#2a0d10f2);
-}
-
-#dsh-plan{
-  position:absolute; inset:0; overflow:hidden; background:var(--uupm-bg-0); color:var(--ink);
-  font-size:13px; line-height:1.5; outline:none;
-}
-#dsh-plan .mono{font-family:ui-monospace,Cascadia,Consolas,monospace}
-#dsh-plan:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
-
-/* ── dot-grid world layer: screen-fixed, positioned by JS from the viewport ── */
-#dsh-plan .p-grid{position:absolute; inset:0; z-index:0; pointer-events:none;
-  background-image:radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
-  background-size:24px 24px; background-position:0 0}
-
-/* ── transformed world container ── */
-#dsh-plan .p-world{position:absolute; inset:0; z-index:1; transform-origin:0 0}
-#dsh-plan .p-layer{position:absolute; inset:0; pointer-events:none}
-#dsh-plan .p-edges{position:absolute; overflow:visible; width:100%; height:100%; pointer-events:none}
-/* The team frame is a grouping surface, not an interactive one: left
-   event-transparent so real drags reach the member cards inside it (the
-   frame head opts back in for group-drag/menu/Delete). */
-#dsh-plan .p-frame{pointer-events:none}
-#dsh-plan .p-frame-head{pointer-events:auto}
-#dsh-plan .p-node{pointer-events:auto}
-#dsh-plan .e-member{stroke:var(--uupm-edge-member); stroke-opacity:.38; stroke-width:1.5}
-#dsh-plan .e-member.dashed{stroke-dasharray:3 4}
-
-/* ── team frame ── */
-/* --frame-line is the team hue set inline per frame (frameHue); --frame-ink is
-   what the frame actually paints with — the hue itself on dark, shaded 72%
-   toward black on light, where amber/lime/teal outlines fell to 1.8-2.2:1. */
-#dsh-plan .p-frame{--frame-ink:var(--frame-line,#8B5CF6)}
-@media (prefers-color-scheme: light){
-  #dsh-plan .p-frame{--frame-ink:color-mix(in srgb,var(--frame-line,#8B5CF6) 72%,black)}
-}
-#dsh-plan .p-frame{position:absolute; border:1px solid var(--frame-ink); border-radius:10px;
-  background:var(--frame-bg,var(--uupm-wash-5)); min-width:120px; min-height:60px}
-#dsh-plan .p-frame-head{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
-  height:24px; padding:0 10px; border-radius:6px; display:flex; gap:8px; align-items:center;
-  background:var(--uupm-bg-2); border:1px solid var(--frame-ink);
-  font-size:12px; font-weight:600; letter-spacing:.02em; white-space:nowrap; cursor:grab}
-#dsh-plan .p-frame-head:active{cursor:grabbing}
-#dsh-plan .p-frame-head:hover{border-color:var(--card-line-hover)}
-#dsh-plan .p-frame-head .cnt{color:var(--ink-muted); font-weight:400}
-#dsh-plan .p-frame-head .route{font-size:10.5px; color:var(--ink-muted)}
-#dsh-plan .p-frame.is-mirror{border-style:dashed}
-#dsh-plan .p-frame.is-roster{border-style:double;border-width:3px}
-#dsh-plan .p-frame.is-roster .p-frame-head{border-style:dashed}
-#dsh-plan .p-frame.is-syncing .p-frame-head .route{color:var(--accent)}
-#dsh-plan .p-frame.is-unreachable{opacity:.76;border-style:dashed}
-#dsh-plan .p-frame-unreachable{position:absolute;left:8px;top:20px;max-width:calc(100% - 16px);color:var(--uupm-error);font-size:11px;pointer-events:none}
-#dsh-plan .p-node.remote.is-unreachable{opacity:.72;border-left-color:var(--uupm-error)}
-#dsh-plan .p-node.remote.is-unreachable .sub{color:var(--uupm-error)}
-
-/* ── node card (fixed 56px border-box height = world.NODE_H) ── */
-#dsh-plan .p-node{position:absolute; width:172px; height:56px; padding:8px 26px 8px 14px;
-  background:var(--card-bg); border:1px solid var(--card-line); border-left:3px solid var(--edge-live);
-  border-radius:8px; cursor:grab; user-select:none;
-  transition:border-color 120ms cubic-bezier(0.2,0,0,1), transform 120ms cubic-bezier(0.2,0,0,1)}
-#dsh-plan .p-node:hover{border-color:var(--card-line-hover)}
-#dsh-plan .p-node:active{cursor:grabbing}
-#dsh-plan .p-node:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
-#dsh-plan .p-node.selected{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-node.dragging{transform:scale(1.02); border-color:var(--accent)}
-#dsh-plan .p-node.cold{border-left-color:var(--edge-cold)}
-#dsh-plan .p-node .nm{font-weight:600; display:flex; align-items:center; gap:7px;
-  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-/* The name span clips with an ellipsis (min-width:0 lets it shrink inside
-   the flex row) — without it a long peer address was hard-cut mid-digit.
-   属主令 W2: TWO-LINE clamp for the name (long Chinese team titles read
-   fully); the card's 172x56 geometry is untouched — the clamp absorbs the
-   overflow. The handle line (.sub) stays single-line ellipsis below. */
-#dsh-plan .p-node .nm-text{min-width:0; overflow:hidden; white-space:normal;
-  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.25}
-/* A peer address has no break point, so the two-line clamp clipped it to one
-   line under the badge; let it wrap anywhere onto the second line. */
-#dsh-plan .p-node.remote .nm-text{overflow-wrap:anywhere}
-#dsh-plan .p-node .dot{width:8px; height:8px; border-radius:50%; background:var(--edge-live); flex:none}
-#dsh-plan .p-node.cold .dot{background:transparent; border:1.5px solid var(--edge-cold)}
-#dsh-plan .p-node .sub-row{display:flex; align-items:baseline; gap:6px; margin-top:2px; min-width:0}
-#dsh-plan .p-node .sub-row .sub{flex:1 1 auto; min-width:0; margin-top:0}
-#dsh-plan .p-node .work{flex:none; font-size:10.5px; font-weight:500; color:var(--ink-muted); white-space:nowrap}
-#dsh-plan .p-node .work:empty{display:none}
-#dsh-plan .p-node.is-working .work{color:var(--edge-live)}
-#dsh-plan .p-node.is-working .dot{animation:p-working 1.4s ease-in-out infinite}
-@keyframes p-working{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--edge-live) 55%,transparent)}50%{box-shadow:0 0 0 4px transparent}}
-@media (prefers-reduced-motion: reduce){#dsh-plan .p-node.is-working .dot{animation:none}}
-#dsh-plan .p-node .sub{font-size:11px; color:var(--ink-muted); margin-top:2px;
-  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-/* W1: a picked search hit pulses its card for 1.2s (class removed on timer). */
-#dsh-plan .p-node.pulse{box-shadow:0 0 0 2px var(--accent), 0 0 14px 4px var(--uupm-wash-15); border-color:var(--accent)}
-/* W1: toolbar search box + hit list. */
-#dsh-plan .p-search{position:relative}
-#dsh-plan .p-search-input{width:170px; min-height:28px; padding:2px 8px; font-size:12px;
-  background:transparent; color:var(--ink); border:1px solid var(--card-line); border-radius:6px}
-#dsh-plan .p-search-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-search-list{position:absolute; top:100%; left:0; margin-top:4px; display:none;
-  min-width:240px; max-height:220px; overflow:auto; z-index:9;
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:6px}
-#dsh-plan .p-search-hit{padding:5px 10px; font-size:12px; color:var(--ink); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
-#dsh-plan .p-search-hit:hover, #dsh-plan .p-search-hit.active{background:var(--uupm-wash-15)}
-#dsh-plan .p-node .prio{position:absolute; top:6px; right:8px; font-size:10px; color:var(--ink-muted);
-  border:1px solid var(--card-line); border-radius:4px; padding:0 5px}
-
-/* ── marquee ── */
-#dsh-plan .p-marquee{position:absolute; z-index:2; display:none; pointer-events:none;
-  border:1px solid var(--accent); background:var(--uupm-wash-8)}
-
-/* ── HUD ── */
-#dsh-plan .p-toolbar{position:absolute; top:16px; left:16px; z-index:3; display:flex; gap:6px; align-items:center;
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:6px 8px}
-#dsh-plan .p-tabs{position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:4px;
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:4px}
-#dsh-plan .p-tabs [role=tab]{background:transparent; color:var(--ink-muted); border:1px solid transparent; border-radius:6px;
-  padding:4px 12px; font:inherit; cursor:pointer}
-#dsh-plan .p-tabs [role=tab]:hover{color:var(--ink); border-color:var(--card-line)}
-#dsh-plan .p-tabs [role=tab][aria-selected=true]{color:var(--ink); border-color:var(--accent); background:var(--uupm-wash-12)}
-#dsh-plan .p-tabs [role=tab]:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-toolbar button{background:transparent; color:var(--ink); border:1px solid var(--card-line); border-radius:6px;
-  padding:4px 10px; font:inherit; cursor:pointer; white-space:nowrap}
-#dsh-plan .p-toolbar button:hover{border-color:var(--accent)}
-#dsh-plan .p-toolbar button:active{background:var(--uupm-wash-15)}
-#dsh-plan .p-toolbar button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-zoom{min-width:44px; text-align:center; font-size:11px; color:var(--ink-muted)}
-/* Toolbar groups (view | arrange | network): a hairline between them. */
-#dsh-plan .p-sep{align-self:stretch; width:1px; margin:2px 4px; background:var(--card-line)}
-#dsh-plan .p-lamp{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-muted); padding:0 6px}
-#dsh-plan .p-lamp i{width:7px; height:7px; border-radius:50%; background:var(--ink-muted); transition:background 140ms ease}
-#dsh-plan .p-lamp.saved i{background:var(--edge-live)}
-#dsh-plan .p-lamp.pending i{background:var(--uupm-warn)}
-#dsh-plan .p-lamp.error{color:var(--uupm-error); cursor:pointer}
-#dsh-plan .p-lamp.error i{background:var(--uupm-error)}
-#dsh-plan .p-lamp.error:hover{border:1px solid var(--uupm-error); border-radius:4px}
-
-#dsh-plan .p-status{position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:14px;
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:8px 14px; font-size:12px}
-#dsh-plan .p-status b{font-weight:600}
-#dsh-plan .ok{color:var(--edge-live)} #dsh-plan .warn{color:var(--uupm-warn)} #dsh-plan .mut{color:var(--ink-muted)}
-
-#dsh-plan .p-legend{position:absolute; bottom:16px; left:16px; z-index:3; font-size:11px; color:var(--ink-muted);
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:4px 10px}
-#dsh-plan .p-legend summary{cursor:pointer; padding:2px 0; user-select:none}
-#dsh-plan .p-legend summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
-#dsh-plan .p-legend[open]{padding-bottom:8px}
-#dsh-plan .p-legend-rows{display:grid; gap:4px; margin-top:4px}
-#dsh-plan .p-legend i{display:inline-block; width:18px; border-top:2px solid var(--uupm-edge-member);
-  vertical-align:middle; margin-right:6px}
-#dsh-plan .p-legend i.dashed{border-top-style:dashed}
-
-/* ── narrow board (<680px): the HUD stacks instead of colliding ──
-   The toolbar, status chip and legend are absolutely placed for a wide
-   board; on a phone they overlapped each other and the toolbar's CJK
-   labels wrapped one glyph per line. The one-row sideways scroll that
-   followed hid the search box and half the actions off-screen (review
-   2026-10-27), so the toolbar and status chip now flow at the top of the
-   board instead: the toolbar wraps, search first on its own row, and the
-   status chip sits under whatever height that takes. The legend (reference,
-   not state) hides. */
-@media (max-width:680px){
-  #dsh-plan .p-toolbar{position:relative; top:auto; left:auto; margin:8px 8px 0; flex-wrap:wrap; row-gap:6px}
-  #dsh-plan .p-toolbar > *{flex:none}
-  #dsh-plan .p-toolbar .p-search{order:-1; flex:1 1 100%}
-  #dsh-plan .p-toolbar .p-sep{display:none}
-  #dsh-plan .p-toolbar .p-search-input{width:100%; box-sizing:border-box}
-  #dsh-plan .p-status{position:relative; top:auto; right:auto; left:auto; width:fit-content; margin:6px 8px 0; padding:6px 10px; gap:10px; flex-wrap:wrap}
-  #dsh-plan .p-legend{display:none}
-}
-@media (pointer:coarse){
-  #dsh-plan .p-toolbar button{min-height:36px; min-width:36px}
-}
-
-/* ── reduced motion: zero animation, state carried by text (hard baseline) ── */
-@media (prefers-reduced-motion: reduce){
-  #dsh-plan *{transition:none !important; animation:none !important}
-}
-
-/* ── PR C: drop-target highlight, context menu, name dialog, notices ── */
-#dsh-plan .p-frame.drop-target{border-color:var(--accent); border-width:2px; background:var(--uupm-wash-12)}
-#dsh-plan .p-frame-head:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-
-/* ── PR D: federation overlay — peer badges, activity/federal edges, status fly ── */
-/* Peer cards: the 'peer' tag is ~36px wide against the 26px gutter a P0–P9
-   tag fits in, so it sat on top of the address text — widen the gutter. */
-#dsh-plan .p-node.remote{border-left-color:var(--federal); padding-right:46px}
-#dsh-plan .p-node.remote .dot{background:var(--federal)}
-#dsh-plan .p-node.remote .prio{color:var(--ink)}
-/* gh#20 W-A link badge: linked green / stranger gray (fleet reserved);
-   the ✓/✗ verified mark rides inside the same chip. */
-#dsh-plan .p-node .prio.lnk-linked{color:var(--live, #2e9e5b); border-color:var(--live, #2e9e5b)}
-#dsh-plan .p-node .prio.lnk-stranger{color:var(--ink-muted); border-color:var(--card-line)}
-#dsh-plan .e-activity{stroke:var(--accent); stroke-width:2; stroke-dasharray:8 6; stroke-opacity:.9}
-#dsh-plan .e-federal{stroke:var(--federal); stroke-width:1.5; stroke-dasharray:6 5; stroke-opacity:.5}
-#dsh-plan .edge-label{font-size:10.5px; fill:var(--ink-muted)}
-/* in-flight routes flow only when motion is welcome; reduced-motion keeps
-   the zero-animation baseline (state stays in the label text). */
-@media (prefers-reduced-motion: no-preference){
-  #dsh-plan .e-activity{animation:p-activity-flow 1.1s linear infinite}
-}
-@keyframes p-activity-flow{to{stroke-dashoffset:-28}}
-#dsh-plan .p-status{cursor:pointer}
-#dsh-plan .p-status:hover{border-color:var(--accent)}
-#dsh-plan .p-status:active{background:var(--uupm-wash-12)}
-#dsh-plan .p-status:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
-
-#dsh-plan .p-menu{position:fixed; z-index:5; min-width:170px; display:grid; padding:4px; gap:2px;
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px}
-#dsh-plan .p-menu [role=menuitem]{background:transparent; color:var(--ink); border:1px solid transparent;
-  border-radius:6px; padding:6px 10px; font:inherit; text-align:left; cursor:pointer; white-space:nowrap}
-#dsh-plan .p-menu [role=menuitem]:hover{border-color:var(--card-line); background:var(--uupm-wash-8)}
-#dsh-plan .p-menu [role=menuitem]:active{background:var(--uupm-wash-18)}
-#dsh-plan .p-menu [role=menuitem]:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-menu [role=menuitem][aria-disabled=true]{color:var(--ink-muted); cursor:not-allowed}
-
-#dsh-plan .p-dialog{position:absolute; inset:0; z-index:6; display:grid; place-items:center;
-  background:var(--scrim)}
-#dsh-plan .p-dialog-panel{min-width:300px; padding:14px 16px; display:grid; gap:10px;
-  background:var(--uupm-bg-2); border:1px solid var(--card-line); border-radius:10px}
-#dsh-plan .p-dialog-title{font-weight:600; font-size:12.5px; color:var(--ink)}
-#dsh-plan .p-dialog-input{font:inherit; color:var(--ink); background:var(--uupm-bg-0);
-  border:1px solid var(--card-line); border-radius:6px; padding:7px 10px}
-#dsh-plan .p-dialog-input:hover{border-color:color-mix(in srgb,var(--uupm-ink-1) 55%,transparent)}
-#dsh-plan .p-dialog-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
-#dsh-plan .p-dialog-err{min-height:1.2em; font-size:11px; color:var(--uupm-error)}
-#dsh-plan .p-dialog-kind{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:3px;
-  background:var(--uupm-bg-0); border:1px solid var(--card-line); border-radius:8px}
-#dsh-plan .p-dialog-kind button{font:inherit; color:var(--ink-muted); background:transparent; border:1px solid transparent;
-  border-radius:6px; padding:6px 10px; cursor:pointer}
-#dsh-plan .p-dialog-kind button:hover{color:var(--ink); background:var(--uupm-wash-8)}
-#dsh-plan .p-dialog-kind button[aria-checked=true]{color:var(--ink); font-weight:600; background:var(--uupm-wash-15);
-  border-color:var(--accent)}
-#dsh-plan .p-dialog-kind button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-dialog-hint{font-size:11px; color:var(--ink-muted); max-width:340px}
-#dsh-plan .p-dialog-row{display:flex; gap:8px; justify-content:flex-end}
-#dsh-plan .p-dialog-row button{background:transparent; color:var(--ink); border:1px solid var(--card-line);
-  border-radius:6px; padding:5px 12px; font:inherit; cursor:pointer}
-#dsh-plan .p-dialog-row button:hover{border-color:var(--accent)}
-#dsh-plan .p-dialog-row button:active{background:var(--uupm-wash-15)}
-#dsh-plan .p-dialog-row button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-
-#dsh-plan .p-notice-stack{position:absolute; bottom:52px; left:50%; transform:translateX(-50%); z-index:5;
-  display:grid; gap:6px; justify-items:center; pointer-events:none}
-#dsh-plan .p-notice{max-width:60ch; padding:7px 12px; font-size:12px; color:var(--ink);
-  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; white-space:nowrap;
-  overflow:hidden; text-overflow:ellipsis}
-#dsh-plan .p-notice.error{color:var(--error-ink); border-color:var(--uupm-error); background:var(--error-panel)}
-
-/* Panel-slim migration: the unjoined-sessions join affordance on the toolbar. */
-#dsh-plan .p-netbtn{color:var(--ink-muted)}
-#dsh-plan .p-netbtn:not([disabled]){color:var(--ink)}
-#dsh-plan .p-netmenu{max-height:240px; overflow:auto}
-
-/* ── Node list drawer (network-membership-display): teamed nodes hold the
-   canvas; every other session is managed here, switched by host. ── */
-#dsh-plan .p-nodebtn{color:var(--ink)}
-#dsh-plan .p-nodelist{min-width:300px; max-width:340px; max-height:420px; overflow:auto; padding:6px}
-#dsh-plan .p-nodelist-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
-  padding:2px 4px 6px; border-bottom:1px solid var(--card-line)}
-#dsh-plan .p-nodelist-title{font-size:12px; font-weight:600; color:var(--ink)}
-#dsh-plan .p-nodesel{font:inherit; font-size:11.5px; color:var(--ink); background:var(--uupm-bg-0);
-  border:1px solid var(--card-line); border-radius:6px; padding:2px 6px; max-width:220px}
-#dsh-plan .p-nodesel:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-nodelist-group{font-size:11px; color:var(--ink-muted); padding:8px 4px 3px;
-  display:flex; align-items:baseline; gap:8px}
-#dsh-plan .p-nodelist-note{font-size:10px; color:var(--ink-muted); opacity:.8}
-#dsh-plan .p-noderow{display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:6px;
-  font-size:12px; color:var(--ink)}
-#dsh-plan .p-noderow:hover{background:var(--uupm-wash-8)}
-#dsh-plan .p-nodedot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--edge-live)}
-#dsh-plan .p-nodedot.cold{background:var(--ink-muted)}
-#dsh-plan .p-nodedot.off{background:transparent; border:1px solid var(--ink-muted)}
-#dsh-plan .p-nodename{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
-#dsh-plan .p-nonet{flex:none; font-size:10px; color:var(--uupm-warn); border:1px solid var(--uupm-warn);
-  border-radius:4px; padding:0 4px}
-#dsh-plan .p-teamcount{flex:none; font-size:10px; color:var(--ink-muted); border:1px solid var(--card-line);
-  border-radius:4px; padding:0 4px}
-#dsh-plan .p-listbtn{flex:none; background:transparent; color:var(--ink); border:1px solid var(--card-line);
-  border-radius:5px; padding:1px 7px; font:inherit; font-size:11px; cursor:pointer}
-#dsh-plan .p-listbtn:hover{border-color:var(--card-line-hover); background:var(--uupm-wash-8)}
-#dsh-plan .p-listbtn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
-#dsh-plan .p-nodelist-empty{padding:10px 4px; font-size:11.5px; color:var(--ink-muted)}
-
-/* ── Frame resize handles (owner ruling: frames stretch/adjust) — eight
-   invisible hit zones that show the grip on hover. ── */
-#dsh-plan .p-frame{position:absolute}
-#dsh-plan .p-frame-handle{position:absolute; pointer-events:auto; width:10px; height:10px; z-index:2; opacity:0;
-  transition:opacity 120ms ease}
-#dsh-plan .p-frame:hover .p-frame-handle{opacity:1}
-#dsh-plan .p-frame-handle::after{content:''; position:absolute; inset:2px; background:var(--frame-ink);
-  border-radius:2px}
-#dsh-plan .p-h-n{top:-5px; left:calc(50% - 12px); width:24px; height:8px; cursor:ns-resize}
-#dsh-plan .p-h-s{bottom:-5px; left:calc(50% - 12px); width:24px; height:8px; cursor:ns-resize}
-#dsh-plan .p-h-e{right:-5px; top:calc(50% - 12px); width:8px; height:24px; cursor:ew-resize}
-#dsh-plan .p-h-w{left:-5px; top:calc(50% - 12px); width:8px; height:24px; cursor:ew-resize}
-#dsh-plan .p-h-ne{top:-5px; right:-5px; cursor:nesw-resize}
-#dsh-plan .p-h-nw{top:-5px; left:-5px; cursor:nwse-resize}
-#dsh-plan .p-h-se{bottom:-5px; right:-5px; cursor:nwse-resize}
-#dsh-plan .p-h-sw{bottom:-5px; left:-5px; cursor:nesw-resize}
-#dsh-plan .p-h-ne::after, #dsh-plan .p-h-sw::after{transform:rotate(45deg)}
-#dsh-plan .p-h-nw::after, #dsh-plan .p-h-se::after{transform:rotate(-45deg)}
-#dsh-plan .p-frame.selected .p-frame-handle{opacity:1}
-#dsh-plan .p-frame.selected{outline:1px solid var(--frame-ink)}
+/* Planning mode (2D infinite canvas) — ported from the approved wireframe
+   (feedback/2026-08-27-nexus-canvas-ux/prototype-v1.html) with the design
+   system's three-layer token discipline. Tokens are scoped to #dsh-plan
+   (token sovereignty: the stage owns its theme, detached from any host).
+   Deviations from the prototype, all for computable geometry:
+   - .frame-head is horizontally centered with a fixed 24px border-box
+     height, so the star-edge origin is exactly (fx + fw/2, fy + 11);
+   - .node has a fixed 56px border-box height matching world.NODE_H, with
+     nowrap/ellipsis so the card can never outgrow the edge math.
+   Layers (z): grid 0 < world 1 < marquee 2 < HUD 3. */
+
+#dsh-plan *,#dsh-plan *::before,#dsh-plan *::after{box-sizing:border-box}
+
+#dsh-plan{
+  /* primitive — bound to the workbench tokens (--n-*, workbench.css) so the
+     board follows the same dark/light theme as the rail; the literal after
+     each comma is the stage's own dark value, kept so the board still
+     renders on a host that ships without workbench.css (token sovereignty). */
+  --uupm-ink-0:var(--n-ink,#dde3f0); --uupm-ink-1:var(--n-ink-muted,#7a86a0);
+  --uupm-bg-0:var(--n-bg,#060a12); --uupm-bg-1:var(--n-panel,#0d1322); --uupm-bg-2:var(--n-raised,#131b2e);
+  --uupm-accent:var(--n-accent,#9673f7); --uupm-live:var(--n-live,#4ade80); --uupm-cold:var(--n-cold,#7a86a0);
+  --uupm-edge-member:var(--n-canvas,#22d3ee);
+  --uupm-warn:var(--n-act,#f59e0b); --uupm-error:var(--n-danger,#f87171); --uupm-indigo:var(--n-federal,#6366f1);
+  /* accent washes (hover 8% / active 12-18% / tint 5-10%), one definition each */
+  --uupm-wash-5:color-mix(in srgb,var(--uupm-accent) 5%,transparent);
+  --uupm-wash-8:color-mix(in srgb,var(--uupm-accent) 8%,transparent);
+  --uupm-wash-12:color-mix(in srgb,var(--uupm-accent) 12%,transparent);
+  --uupm-wash-15:color-mix(in srgb,var(--uupm-accent) 15%,transparent);
+  --uupm-wash-18:color-mix(in srgb,var(--uupm-accent) 18%,transparent);
+  /* semantic */
+  --surface:var(--uupm-bg-1); --ink:var(--uupm-ink-0); --ink-muted:var(--uupm-ink-1);
+  --accent:var(--uupm-accent); --edge-live:var(--uupm-live); --edge-cold:var(--uupm-cold);
+  --federal:var(--uupm-indigo);
+  /* component */
+  --card-bg:var(--surface); --card-line:var(--n-card-line,#5c6680); --card-line-hover:var(--uupm-ink-1);
+  --toolbar-bg:color-mix(in srgb,var(--uupm-bg-1) 92%,transparent);
+  --grid-dot:color-mix(in srgb,var(--uupm-ink-1) 22%,transparent);
+  --scrim:color-mix(in srgb,var(--uupm-bg-0) 60%,transparent);
+  --error-ink:var(--n-error-ink,#fecaca); --error-panel:var(--n-error-panel,#2a0d10f2);
+}
+
+#dsh-plan{
+  position:absolute; inset:0; overflow:hidden; background:var(--uupm-bg-0); color:var(--ink);
+  font-size:13px; line-height:1.5; outline:none;
+}
+#dsh-plan .mono{font-family:ui-monospace,Cascadia,Consolas,monospace}
+#dsh-plan:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
+
+/* ── dot-grid world layer: screen-fixed, positioned by JS from the viewport ── */
+#dsh-plan .p-grid{position:absolute; inset:0; z-index:0; pointer-events:none;
+  background-image:radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
+  background-size:24px 24px; background-position:0 0}
+
+/* ── transformed world container ── */
+#dsh-plan .p-world{position:absolute; inset:0; z-index:1; transform-origin:0 0}
+#dsh-plan .p-layer{position:absolute; inset:0; pointer-events:none}
+#dsh-plan .p-edges{position:absolute; overflow:visible; width:100%; height:100%; pointer-events:none}
+/* The team frame is a grouping surface, not an interactive one: left
+   event-transparent so real drags reach the member cards inside it (the
+   frame head opts back in for group-drag/menu/Delete). */
+#dsh-plan .p-frame{pointer-events:none}
+#dsh-plan .p-frame-head{pointer-events:auto}
+#dsh-plan .p-node{pointer-events:auto}
+#dsh-plan .e-member{stroke:var(--uupm-edge-member); stroke-opacity:.38; stroke-width:1.5}
+#dsh-plan .e-member.dashed{stroke-dasharray:3 4}
+
+/* ── team frame ── */
+/* --frame-line is the team hue set inline per frame (frameHue); --frame-ink is
+   what the frame actually paints with — the hue itself on dark, shaded 72%
+   toward black on light, where amber/lime/teal outlines fell to 1.8-2.2:1. */
+#dsh-plan .p-frame{--frame-ink:var(--frame-line,#8B5CF6)}
+@media (prefers-color-scheme: light){
+  #dsh-plan .p-frame{--frame-ink:color-mix(in srgb,var(--frame-line,#8B5CF6) 72%,black)}
+}
+#dsh-plan .p-frame{position:absolute; border:1px solid var(--frame-ink); border-radius:10px;
+  background:var(--frame-bg,var(--uupm-wash-5)); min-width:120px; min-height:60px}
+#dsh-plan .p-frame-head{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
+  height:24px; padding:0 10px; border-radius:6px; display:flex; gap:8px; align-items:center;
+  background:var(--uupm-bg-2); border:1px solid var(--frame-ink);
+  font-size:12px; font-weight:600; letter-spacing:.02em; white-space:nowrap; cursor:grab}
+#dsh-plan .p-frame-head:active{cursor:grabbing}
+#dsh-plan .p-frame-head:hover{border-color:var(--card-line-hover)}
+#dsh-plan .p-frame-head .cnt{color:var(--ink-muted); font-weight:400}
+#dsh-plan .p-frame-head .route{font-size:10.5px; color:var(--ink-muted)}
+#dsh-plan .p-frame.is-mirror{border-style:dashed}
+#dsh-plan .p-frame.is-roster{border-style:double;border-width:3px}
+#dsh-plan .p-frame.is-roster .p-frame-head{border-style:dashed}
+#dsh-plan .p-frame.is-syncing .p-frame-head .route{color:var(--accent)}
+#dsh-plan .p-frame.is-unreachable{opacity:.76;border-style:dashed}
+#dsh-plan .p-frame-unreachable{position:absolute;left:8px;top:20px;max-width:calc(100% - 16px);color:var(--uupm-error);font-size:11px;pointer-events:none}
+#dsh-plan .p-node.remote.is-unreachable{opacity:.72;border-left-color:var(--uupm-error)}
+#dsh-plan .p-node.remote.is-unreachable .sub{color:var(--uupm-error)}
+
+/* ── node card (fixed 56px border-box height = world.NODE_H) ── */
+#dsh-plan .p-node{position:absolute; width:172px; height:56px; padding:8px 26px 8px 14px;
+  background:var(--card-bg); border:1px solid var(--card-line); border-left:3px solid var(--edge-live);
+  border-radius:8px; cursor:grab; user-select:none;
+  transition:border-color 120ms cubic-bezier(0.2,0,0,1), transform 120ms cubic-bezier(0.2,0,0,1)}
+#dsh-plan .p-node:hover{border-color:var(--card-line-hover)}
+#dsh-plan .p-node:active{cursor:grabbing}
+#dsh-plan .p-node:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+#dsh-plan .p-node.selected{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-node.dragging{transform:scale(1.02); border-color:var(--accent)}
+#dsh-plan .p-node.cold{border-left-color:var(--edge-cold)}
+#dsh-plan .p-node .nm{font-weight:600; display:flex; align-items:center; gap:7px;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+/* The name span clips with an ellipsis (min-width:0 lets it shrink inside
+   the flex row) — without it a long peer address was hard-cut mid-digit.
+   属主令 W2: TWO-LINE clamp for the name (long Chinese team titles read
+   fully); the card's 172x56 geometry is untouched — the clamp absorbs the
+   overflow. The handle line (.sub) stays single-line ellipsis below. */
+#dsh-plan .p-node .nm-text{min-width:0; overflow:hidden; white-space:normal;
+  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.25}
+/* A peer address has no break point, so the two-line clamp clipped it to one
+   line under the badge; let it wrap anywhere onto the second line. */
+#dsh-plan .p-node.remote .nm-text{overflow-wrap:anywhere}
+#dsh-plan .p-node .dot{width:8px; height:8px; border-radius:50%; background:var(--edge-live); flex:none}
+#dsh-plan .p-node.cold .dot{background:transparent; border:1.5px solid var(--edge-cold)}
+#dsh-plan .p-node .sub-row{display:flex; align-items:baseline; gap:6px; margin-top:2px; min-width:0}
+#dsh-plan .p-node .sub-row .sub{flex:1 1 auto; min-width:0; margin-top:0}
+#dsh-plan .p-node .work{flex:none; font-size:10.5px; font-weight:500; color:var(--ink-muted); white-space:nowrap}
+#dsh-plan .p-node .work:empty{display:none}
+#dsh-plan .p-node.is-working .work{color:var(--edge-live)}
+#dsh-plan .p-node.is-working .dot{animation:p-working 1.4s ease-in-out infinite}
+@keyframes p-working{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--edge-live) 55%,transparent)}50%{box-shadow:0 0 0 4px transparent}}
+@media (prefers-reduced-motion: reduce){#dsh-plan .p-node.is-working .dot{animation:none}}
+#dsh-plan .p-node .sub{font-size:11px; color:var(--ink-muted); margin-top:2px;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+/* W1: a picked search hit pulses its card for 1.2s (class removed on timer). */
+#dsh-plan .p-node.pulse{box-shadow:0 0 0 2px var(--accent), 0 0 14px 4px var(--uupm-wash-15); border-color:var(--accent)}
+/* W1: toolbar search box + hit list. */
+#dsh-plan .p-search{position:relative}
+#dsh-plan .p-search-input{width:170px; min-height:28px; padding:2px 8px; font-size:12px;
+  background:transparent; color:var(--ink); border:1px solid var(--card-line); border-radius:6px}
+#dsh-plan .p-search-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-search-list{position:absolute; top:100%; left:0; margin-top:4px; display:none;
+  min-width:240px; max-height:220px; overflow:auto; z-index:9;
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:6px}
+#dsh-plan .p-search-hit{padding:5px 10px; font-size:12px; color:var(--ink); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
+#dsh-plan .p-search-hit:hover, #dsh-plan .p-search-hit.active{background:var(--uupm-wash-15)}
+#dsh-plan .p-node .prio{position:absolute; top:6px; right:8px; font-size:10px; color:var(--ink-muted);
+  border:1px solid var(--card-line); border-radius:4px; padding:0 5px}
+
+/* ── marquee ── */
+#dsh-plan .p-marquee{position:absolute; z-index:2; display:none; pointer-events:none;
+  border:1px solid var(--accent); background:var(--uupm-wash-8)}
+
+/* ── HUD ── */
+#dsh-plan .p-toolbar{position:absolute; top:16px; left:16px; z-index:3; display:flex; gap:6px; align-items:center;
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:6px 8px}
+#dsh-plan .p-tabs{position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:4px;
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:4px}
+#dsh-plan .p-tabs [role=tab]{background:transparent; color:var(--ink-muted); border:1px solid transparent; border-radius:6px;
+  padding:4px 12px; font:inherit; cursor:pointer}
+#dsh-plan .p-tabs [role=tab]:hover{color:var(--ink); border-color:var(--card-line)}
+#dsh-plan .p-tabs [role=tab][aria-selected=true]{color:var(--ink); border-color:var(--accent); background:var(--uupm-wash-12)}
+#dsh-plan .p-tabs [role=tab]:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-toolbar button{background:transparent; color:var(--ink); border:1px solid var(--card-line); border-radius:6px;
+  padding:4px 10px; font:inherit; cursor:pointer; white-space:nowrap}
+#dsh-plan .p-toolbar button:hover{border-color:var(--accent)}
+#dsh-plan .p-toolbar button:active{background:var(--uupm-wash-15)}
+#dsh-plan .p-toolbar button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-zoom{min-width:44px; text-align:center; font-size:11px; color:var(--ink-muted)}
+/* Toolbar groups (view | arrange | network): a hairline between them. */
+#dsh-plan .p-sep{align-self:stretch; width:1px; margin:2px 4px; background:var(--card-line)}
+#dsh-plan .p-lamp{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-muted); padding:0 6px}
+#dsh-plan .p-lamp i{width:7px; height:7px; border-radius:50%; background:var(--ink-muted); transition:background 140ms ease}
+#dsh-plan .p-lamp.saved i{background:var(--edge-live)}
+#dsh-plan .p-lamp.pending i{background:var(--uupm-warn)}
+#dsh-plan .p-lamp.error{color:var(--uupm-error); cursor:pointer}
+#dsh-plan .p-lamp.error i{background:var(--uupm-error)}
+#dsh-plan .p-lamp.error:hover{border:1px solid var(--uupm-error); border-radius:4px}
+
+#dsh-plan .p-status{position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:14px;
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:8px 14px; font-size:12px}
+#dsh-plan .p-status b{font-weight:600}
+#dsh-plan .ok{color:var(--edge-live)} #dsh-plan .warn{color:var(--uupm-warn)} #dsh-plan .mut{color:var(--ink-muted)}
+
+#dsh-plan .p-legend{position:absolute; bottom:16px; left:16px; z-index:3; font-size:11px; color:var(--ink-muted);
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; padding:4px 10px}
+#dsh-plan .p-legend summary{cursor:pointer; padding:2px 0; user-select:none}
+#dsh-plan .p-legend summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+#dsh-plan .p-legend[open]{padding-bottom:8px}
+#dsh-plan .p-legend-rows{display:grid; gap:4px; margin-top:4px}
+#dsh-plan .p-legend i{display:inline-block; width:18px; border-top:2px solid var(--uupm-edge-member);
+  vertical-align:middle; margin-right:6px}
+#dsh-plan .p-legend i.dashed{border-top-style:dashed}
+
+/* ── narrow board (<680px): the HUD stacks instead of colliding ──
+   The toolbar, status chip and legend are absolutely placed for a wide
+   board; on a phone they overlapped each other and the toolbar's CJK
+   labels wrapped one glyph per line. The one-row sideways scroll that
+   followed hid the search box and half the actions off-screen (review
+   2026-10-27), so the toolbar and status chip now flow at the top of the
+   board instead: the toolbar wraps, search first on its own row, and the
+   status chip sits under whatever height that takes. The legend (reference,
+   not state) hides. */
+@media (max-width:680px){
+  #dsh-plan .p-toolbar{position:relative; top:auto; left:auto; margin:8px 8px 0; flex-wrap:wrap; row-gap:6px}
+  #dsh-plan .p-toolbar > *{flex:none}
+  #dsh-plan .p-toolbar .p-search{order:-1; flex:1 1 100%}
+  #dsh-plan .p-toolbar .p-sep{display:none}
+  #dsh-plan .p-toolbar .p-search-input{width:100%; box-sizing:border-box}
+  #dsh-plan .p-status{position:relative; top:auto; right:auto; left:auto; width:fit-content; margin:6px 8px 0; padding:6px 10px; gap:10px; flex-wrap:wrap}
+  #dsh-plan .p-legend{display:none}
+}
+@media (pointer:coarse){
+  #dsh-plan .p-toolbar button{min-height:36px; min-width:36px}
+}
+
+/* ── reduced motion: zero animation, state carried by text (hard baseline) ── */
+@media (prefers-reduced-motion: reduce){
+  #dsh-plan *{transition:none !important; animation:none !important}
+}
+
+/* ── PR C: drop-target highlight, context menu, name dialog, notices ── */
+#dsh-plan .p-frame.drop-target{border-color:var(--accent); border-width:2px; background:var(--uupm-wash-12)}
+#dsh-plan .p-frame-head:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+
+/* ── PR D: federation overlay — peer badges, activity/federal edges, status fly ── */
+/* Peer cards: the 'peer' tag is ~36px wide against the 26px gutter a P0–P9
+   tag fits in, so it sat on top of the address text — widen the gutter. */
+#dsh-plan .p-node.remote{border-left-color:var(--federal); padding-right:46px}
+#dsh-plan .p-node.remote .dot{background:var(--federal)}
+#dsh-plan .p-node.remote .prio{color:var(--ink)}
+/* gh#20 W-A link badge: linked green / stranger gray (fleet reserved);
+   the ✓/✗ verified mark rides inside the same chip. */
+#dsh-plan .p-node .prio.lnk-linked{color:var(--live, #2e9e5b); border-color:var(--live, #2e9e5b)}
+#dsh-plan .p-node .prio.lnk-stranger{color:var(--ink-muted); border-color:var(--card-line)}
+#dsh-plan .e-activity{stroke:var(--accent); stroke-width:2; stroke-dasharray:8 6; stroke-opacity:.9}
+#dsh-plan .e-federal{stroke:var(--federal); stroke-width:1.5; stroke-dasharray:6 5; stroke-opacity:.5}
+#dsh-plan .edge-label{font-size:10.5px; fill:var(--ink-muted)}
+/* in-flight routes flow only when motion is welcome; reduced-motion keeps
+   the zero-animation baseline (state stays in the label text). */
+@media (prefers-reduced-motion: no-preference){
+  #dsh-plan .e-activity{animation:p-activity-flow 1.1s linear infinite}
+}
+@keyframes p-activity-flow{to{stroke-dashoffset:-28}}
+#dsh-plan .p-status{cursor:pointer}
+#dsh-plan .p-status:hover{border-color:var(--accent)}
+#dsh-plan .p-status:active{background:var(--uupm-wash-12)}
+#dsh-plan .p-status:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
+
+#dsh-plan .p-menu{position:fixed; z-index:5; min-width:170px; display:grid; padding:4px; gap:2px;
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px}
+#dsh-plan .p-menu [role=menuitem]{background:transparent; color:var(--ink); border:1px solid transparent;
+  border-radius:6px; padding:6px 10px; font:inherit; text-align:left; cursor:pointer; white-space:nowrap}
+#dsh-plan .p-menu [role=menuitem]:hover{border-color:var(--card-line); background:var(--uupm-wash-8)}
+#dsh-plan .p-menu [role=menuitem]:active{background:var(--uupm-wash-18)}
+#dsh-plan .p-menu [role=menuitem]:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-menu [role=menuitem][aria-disabled=true]{color:var(--ink-muted); cursor:not-allowed}
+
+#dsh-plan .p-dialog{position:absolute; inset:0; z-index:6; display:grid; place-items:center;
+  background:var(--scrim)}
+#dsh-plan .p-dialog-panel{min-width:300px; padding:14px 16px; display:grid; gap:10px;
+  background:var(--uupm-bg-2); border:1px solid var(--card-line); border-radius:10px}
+#dsh-plan .p-dialog-title{font-weight:600; font-size:12.5px; color:var(--ink)}
+#dsh-plan .p-dialog-input{font:inherit; color:var(--ink); background:var(--uupm-bg-0);
+  border:1px solid var(--card-line); border-radius:6px; padding:7px 10px}
+#dsh-plan .p-dialog-input:hover{border-color:color-mix(in srgb,var(--uupm-ink-1) 55%,transparent)}
+#dsh-plan .p-dialog-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
+#dsh-plan .p-dialog-err{min-height:1.2em; font-size:11px; color:var(--uupm-error)}
+#dsh-plan .p-dialog-kind{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:3px;
+  background:var(--uupm-bg-0); border:1px solid var(--card-line); border-radius:8px}
+#dsh-plan .p-dialog-kind button{font:inherit; color:var(--ink-muted); background:transparent; border:1px solid transparent;
+  border-radius:6px; padding:6px 10px; cursor:pointer}
+#dsh-plan .p-dialog-kind button:hover{color:var(--ink); background:var(--uupm-wash-8)}
+#dsh-plan .p-dialog-kind button[aria-checked=true]{color:var(--ink); font-weight:600; background:var(--uupm-wash-15);
+  border-color:var(--accent)}
+#dsh-plan .p-dialog-kind button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-dialog-hint{font-size:11px; color:var(--ink-muted); max-width:340px}
+#dsh-plan .p-dialog-row{display:flex; gap:8px; justify-content:flex-end}
+#dsh-plan .p-dialog-row button{background:transparent; color:var(--ink); border:1px solid var(--card-line);
+  border-radius:6px; padding:5px 12px; font:inherit; cursor:pointer}
+#dsh-plan .p-dialog-row button:hover{border-color:var(--accent)}
+#dsh-plan .p-dialog-row button:active{background:var(--uupm-wash-15)}
+#dsh-plan .p-dialog-row button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+
+#dsh-plan .p-notice-stack{position:absolute; bottom:52px; left:50%; transform:translateX(-50%); z-index:5;
+  display:grid; gap:6px; justify-items:center; pointer-events:none}
+#dsh-plan .p-notice{max-width:60ch; padding:7px 12px; font-size:12px; color:var(--ink);
+  background:var(--toolbar-bg); border:1px solid var(--card-line); border-radius:8px; white-space:nowrap;
+  overflow:hidden; text-overflow:ellipsis}
+#dsh-plan .p-notice.error{color:var(--error-ink); border-color:var(--uupm-error); background:var(--error-panel)}
+
+/* Panel-slim migration: the unjoined-sessions join affordance on the toolbar. */
+#dsh-plan .p-netbtn{color:var(--ink-muted)}
+#dsh-plan .p-netbtn:not([disabled]){color:var(--ink)}
+#dsh-plan .p-netmenu{max-height:240px; overflow:auto}
+
+/* ── Node list drawer (network-membership-display): teamed nodes hold the
+   canvas; every other session is managed here, switched by host. ── */
+#dsh-plan .p-nodebtn{color:var(--ink)}
+#dsh-plan .p-nodelist{min-width:300px; max-width:340px; max-height:420px; overflow:auto; padding:6px}
+#dsh-plan .p-nodelist-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
+  padding:2px 4px 6px; border-bottom:1px solid var(--card-line)}
+#dsh-plan .p-nodelist-title{font-size:12px; font-weight:600; color:var(--ink)}
+#dsh-plan .p-nodesel{font:inherit; font-size:11.5px; color:var(--ink); background:var(--uupm-bg-0);
+  border:1px solid var(--card-line); border-radius:6px; padding:2px 6px; max-width:220px}
+#dsh-plan .p-nodesel:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-nodelist-group{font-size:11px; color:var(--ink-muted); padding:8px 4px 3px;
+  display:flex; align-items:baseline; gap:8px}
+#dsh-plan .p-nodelist-note{font-size:10px; color:var(--ink-muted); opacity:.8}
+#dsh-plan .p-noderow{display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:6px;
+  font-size:12px; color:var(--ink)}
+#dsh-plan .p-noderow:hover{background:var(--uupm-wash-8)}
+#dsh-plan .p-nodedot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--edge-live)}
+#dsh-plan .p-nodedot.cold{background:var(--ink-muted)}
+#dsh-plan .p-nodedot.off{background:transparent; border:1px solid var(--ink-muted)}
+#dsh-plan .p-nodename{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
+#dsh-plan .p-nonet{flex:none; font-size:10px; color:var(--uupm-warn); border:1px solid var(--uupm-warn);
+  border-radius:4px; padding:0 4px}
+#dsh-plan .p-teamcount{flex:none; font-size:10px; color:var(--ink-muted); border:1px solid var(--card-line);
+  border-radius:4px; padding:0 4px}
+#dsh-plan .p-listbtn{flex:none; background:transparent; color:var(--ink); border:1px solid var(--card-line);
+  border-radius:5px; padding:1px 7px; font:inherit; font-size:11px; cursor:pointer}
+#dsh-plan .p-listbtn:hover{border-color:var(--card-line-hover); background:var(--uupm-wash-8)}
+#dsh-plan .p-listbtn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
+#dsh-plan .p-nodelist-empty{padding:10px 4px; font-size:11.5px; color:var(--ink-muted)}
+
+/* ── Frame resize handles (owner ruling: frames stretch/adjust) — eight
+   invisible hit zones that show the grip on hover. ── */
+#dsh-plan .p-frame{position:absolute}
+#dsh-plan .p-frame-handle{position:absolute; pointer-events:auto; width:10px; height:10px; z-index:2; opacity:0;
+  transition:opacity 120ms ease}
+#dsh-plan .p-frame:hover .p-frame-handle{opacity:1}
+#dsh-plan .p-frame-handle::after{content:''; position:absolute; inset:2px; background:var(--frame-ink);
+  border-radius:2px}
+#dsh-plan .p-h-n{top:-5px; left:calc(50% - 12px); width:24px; height:8px; cursor:ns-resize}
+#dsh-plan .p-h-s{bottom:-5px; left:calc(50% - 12px); width:24px; height:8px; cursor:ns-resize}
+#dsh-plan .p-h-e{right:-5px; top:calc(50% - 12px); width:8px; height:24px; cursor:ew-resize}
+#dsh-plan .p-h-w{left:-5px; top:calc(50% - 12px); width:8px; height:24px; cursor:ew-resize}
+#dsh-plan .p-h-ne{top:-5px; right:-5px; cursor:nesw-resize}
+#dsh-plan .p-h-nw{top:-5px; left:-5px; cursor:nwse-resize}
+#dsh-plan .p-h-se{bottom:-5px; right:-5px; cursor:nwse-resize}
+#dsh-plan .p-h-sw{bottom:-5px; left:-5px; cursor:nesw-resize}
+#dsh-plan .p-h-ne::after, #dsh-plan .p-h-sw::after{transform:rotate(45deg)}
+#dsh-plan .p-h-nw::after, #dsh-plan .p-h-se::after{transform:rotate(-45deg)}
+#dsh-plan .p-frame.selected .p-frame-handle{opacity:1}
+#dsh-plan .p-frame.selected{outline:1px solid var(--frame-ink)}