/* =====================================================================
   Nodes: the Tree / Map explorer (nodes/app.js, nodes/panels.js),
   redrawn for PathoSphere. Selectors match what those files render.
   The box width (188px) is also hard-coded there as W: keep in step.
   ===================================================================== */
#view-nodes .shell{
  --rail:280px; --insp:344px;
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr) var(--insp); height:100%; overflow:hidden; position:relative;
}
#view-nodes *{min-width:0}
#view-nodes .only-narrow{display:none!important}
#view-nodes .scrim{display:none}

/* ---------------- rail ---------------- */
#view-nodes .rail{display:flex; flex-direction:column; gap:12px; min-height:0; background:var(--surface); border-right:1px solid var(--line); padding:18px 14px 12px}
#view-nodes .brand{padding:0 4px 2px}
#view-nodes .brand h1{font-family:var(--font-display); font-weight:750; font-size:22px; margin:4px 0 0; line-height:1.1; letter-spacing:-.03em}
#view-nodes .brand .sub{font-size:12.5px; color:var(--muted); margin:6px 0 0; line-height:1.45}
#view-nodes .tabs{display:flex; gap:3px; background:var(--surface-2); border:1px solid var(--line-2); padding:3px; border-radius:10px}
#view-nodes .tab{flex:1; border:0; background:transparent; padding:6px 8px; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted)}
#view-nodes .tab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
#view-nodes .list{flex:1; overflow-y:auto; min-height:0; margin:0 -6px; padding:0 6px 10px}
#view-nodes .grp{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:16px 6px 5px}
#view-nodes .grp:first-child{margin-top:4px}
#view-nodes .row{
  display:grid; grid-template-columns:26px 1fr auto; gap:6px; align-items:center;
  padding:5px 4px 5px 7px; border-radius:8px; cursor:pointer; color:var(--ink-2); font-size:13px; line-height:1.3;
}
#view-nodes .row:hover{background:var(--surface-2); color:var(--ink)}
#view-nodes .row .n{font-family:var(--font-mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
#view-nodes .row.on{color:var(--ink); font-weight:600; background:color-mix(in srgb,var(--c,var(--accent)) 8%,transparent)}
#view-nodes .row.on .n{color:var(--c,var(--accent))}
#view-nodes .row .dot{width:8px; height:8px; border-radius:50%; background:var(--c); display:inline-block; margin-right:6px; vertical-align:1px}
#view-nodes .row .add{
  opacity:0; border:1px solid var(--line); background:var(--surface); border-radius:7px; width:24px; height:22px;
  cursor:pointer; color:var(--muted); font-size:14px; line-height:1; padding:0;
}
#view-nodes .row:hover .add,#view-nodes .row .add:focus-visible{opacity:1}
#view-nodes .row .add:hover{border-color:var(--accent); color:var(--accent)}
#view-nodes .row .cnt{font-family:var(--font-mono); font-size:11px; color:var(--muted); padding-right:4px}
#view-nodes .row.step{grid-template-columns:1fr auto}
#view-nodes .list .none{color:var(--muted); font-size:12.5px; padding:10px 6px}
#view-nodes .rail-foot{display:flex; gap:5px; align-items:center; border-top:1px solid var(--line-2); padding-top:10px; flex-wrap:wrap}
#view-nodes .ver{margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--faint)}

/* ---------------- stage ---------------- */
#view-nodes .stage{display:flex; flex-direction:column; min-width:0; min-height:0; position:relative}
#view-nodes .bar{
  position:relative; display:flex; align-items:flex-start; gap:12px; padding:13px 14px 15px; min-height:64px;
  max-height:50vh; overflow-y:auto; border-bottom:1px solid var(--line); background:var(--surface);
}
#view-nodes .bar-grip{position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; background:linear-gradient(var(--line),var(--line)) center 3px / 36px 2px no-repeat}
#view-nodes .bar-grip:hover{background:linear-gradient(var(--accent),var(--accent)) center 3px / 48px 2px no-repeat}
#view-nodes .seg{display:flex; flex:none; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px}
#view-nodes .seg button{border:0; background:transparent; border-radius:7px; padding:5px 14px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer}
#view-nodes .seg button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm)}
#view-nodes .trail{display:flex; flex-wrap:wrap; gap:8px 7px; align-items:center; flex:1; min-width:0; padding:3px 0}
#view-nodes .trail .lead{white-space:nowrap; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; font-weight:600; color:var(--muted)}
#view-nodes .chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none;
  border:1px solid color-mix(in srgb,var(--c) 42%,var(--line)); background:color-mix(in srgb,var(--c) 9%,var(--surface));
  border-radius:999px; padding:4px 5px 4px 11px; font-size:13px; color:var(--ink); cursor:pointer;
}
#view-nodes .crumb{
  border:1px solid var(--line); background:var(--surface-2); border-radius:8px; padding:4px 10px; cursor:pointer;
  font-size:13px; color:var(--ink-2); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#view-nodes .crumb:hover{border-color:var(--accent); color:var(--accent)}
#view-nodes .crumb.L{border-color:color-mix(in srgb,var(--p1) 45%,var(--line))}
#view-nodes .crumb.R{border-color:color-mix(in srgb,var(--p0) 45%,var(--line))}
#view-nodes .crumb.last{background:var(--accent-soft); color:var(--ink); font-weight:600}
#view-nodes .sep{color:var(--muted); font-size:12px; flex:none}
#view-nodes .sep.dir{font-size:11.5px; font-style:italic}
#view-nodes .depth{margin-left:4px; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); border:1px dashed var(--line); border-radius:999px; padding:2px 8px}
#view-nodes .depth.full{color:var(--accent); border-color:var(--accent)}
#view-nodes .chip .sw{width:9px; height:9px; border-radius:50%; background:var(--c)}
#view-nodes .chip .tn{font-family:var(--font-mono); font-size:10.5px; color:var(--c); font-weight:600}
#view-nodes .chip .via{color:var(--muted); font-size:11px}
#view-nodes .chip .x{border:0; background:transparent; cursor:pointer; color:var(--muted); width:18px; height:18px; border-radius:50%; padding:0; line-height:1}
#view-nodes .chip .x:hover{background:var(--surface-2); color:var(--ink)}
#view-nodes .chip.part{border-style:dashed; background:transparent}
#view-nodes .chip.part .op{font-size:11px; color:var(--c); font-weight:600; padding-right:4px}
#view-nodes .ctrls{display:flex; gap:4px; flex:none}
#view-nodes .ic{height:30px; min-width:30px}

#view-nodes .viewport{
  position:relative; flex:1; overflow:hidden; cursor:grab; touch-action:none;
  background-color:var(--bg);
  background-image:radial-gradient(var(--grid) 1.2px, transparent 1.4px);
  background-size:22px 22px;
}
#view-nodes .viewport::after{   /* soft vignette so the edges recede */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb,var(--bg) 70%,transparent) 100%);
}
#view-nodes .viewport.panning{cursor:grabbing}
#view-nodes .world{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; z-index:1}
#view-nodes .edges{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
#view-nodes .edges path{fill:none; stroke-width:1.8; transition:opacity .2s}
#view-nodes .edges path.hit{stroke:transparent; stroke-width:12; pointer-events:stroke; cursor:help}
#view-nodes .edges path.part{stroke-dasharray:5 4}
#view-nodes .edges path.back{stroke-dasharray:2 4; stroke-width:1.6}
#view-nodes .edges path.dim{opacity:.25}
#view-nodes .edges path.hl{stroke-width:2.7}
#view-nodes .nodes{position:absolute; left:0; top:0}

#view-nodes .node{
  position:absolute; left:0; top:0; width:188px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:8px 11px 9px; box-shadow:var(--shadow-sm),0 6px 16px -12px rgba(0,0,0,.35); cursor:pointer;
  font-size:13px; line-height:1.3; color:var(--ink); user-select:none;
  transition:opacity .2s, box-shadow .15s, border-color .15s;
}
#view-nodes .node:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
#view-nodes .node .lbl{display:block; overflow-wrap:anywhere}
#view-nodes .node .tags{display:flex; gap:3px; margin-top:6px; flex-wrap:wrap}
#view-nodes .node .tg{height:4px; width:14px; border-radius:2px; background:var(--c)}
#view-nodes .node.dis{background:color-mix(in srgb,var(--accent) 6%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 34%,var(--line))}
#view-nodes .node.dis .lbl{font-family:var(--font-display); font-weight:680; font-size:14px; line-height:1.2; letter-spacing:-.012em}
#view-nodes .node .tno{display:inline-block; font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--accent); margin-bottom:3px}
#view-nodes .node .more{
  position:absolute; right:-10px; top:-10px; min-width:24px; height:22px; padding:0 6px;
  border-radius:999px; border:1px solid var(--accent); background:var(--surface); color:var(--accent);
  font-family:var(--font-mono); font-size:11px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm);
}
#view-nodes .node .more:hover,#view-nodes .node .more[aria-expanded="true"]{background:var(--accent); color:var(--on-accent)}
/* tree */
#view-nodes .node .src{display:block; margin-top:5px; font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.02em}
#view-nodes .node.root{border:2px solid var(--accent); padding:11px 13px 12px; box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent), var(--shadow-lg)}
#view-nodes .node.root .lbl{font-family:var(--font-display); font-size:17px; font-weight:750; line-height:1.15; letter-spacing:-.022em}
#view-nodes .node.L{border-left:3px solid var(--p1); padding-left:22px}
#view-nodes .node.R{border-right:3px solid var(--p0); padding-right:22px}
#view-nodes .node.path:not(.sel):not(.root){border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); border-left-width:3px}
#view-nodes .node.loop{border-style:dashed; box-shadow:none; opacity:.8; cursor:default}
#view-nodes .node .fold{
  position:absolute; top:50%; transform:translateY(-50%); min-width:28px; height:24px; padding:0 7px;
  border-radius:999px; background:var(--surface); font-family:var(--font-mono); font-size:11px; font-weight:600;
  cursor:pointer; box-shadow:var(--shadow-sm);
}
#view-nodes .node.R .fold{right:-15px; border:1px solid var(--p0); color:var(--p0)}
#view-nodes .node.L .fold{left:-15px; border:1px solid var(--p1); color:var(--p1)}
#view-nodes .node.R .fold:hover,#view-nodes .node.R .fold[aria-expanded="true"]{background:var(--p0); color:var(--surface)}
#view-nodes .node.L .fold:hover,#view-nodes .node.L .fold[aria-expanded="true"]{background:var(--p1); color:var(--surface)}
#view-nodes .thd{position:absolute; left:0; top:0; width:188px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; pointer-events:none}
#view-nodes .thd.L{color:var(--p1)} #view-nodes .thd.R{color:var(--p0)}
#view-nodes .node.sel{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent), var(--shadow-lg)}
#view-nodes .node.dim{opacity:.6; filter:saturate(.55)}
#view-nodes .node.born{animation:born .45s ease-out}
@keyframes born{from{opacity:0; transform:var(--t) scale(.85)} to{opacity:1}}
#view-nodes .node.flash{animation:nflash 1.1s ease-out}
@keyframes nflash{0%,40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)} 100%{box-shadow:var(--shadow-sm)}}

#view-nodes #empty{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; padding:20px}
#view-nodes #empty .card{
  pointer-events:auto; max-width:540px; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:26px 28px; box-shadow:var(--shadow-lg);
}
#view-nodes #empty h2{font-family:var(--font-display); font-size:24px; font-weight:750; margin:6px 0 10px; line-height:1.15; letter-spacing:-.03em}
#view-nodes #empty p{margin:0 0 12px; color:var(--ink-2)}
#view-nodes #empty ol{margin:0 0 16px; padding-left:20px; color:var(--ink-2)}
#view-nodes #empty li{margin:3px 0}
#view-nodes .starts{display:flex; gap:6px; flex-wrap:wrap}
#view-nodes .hint{
  position:absolute; z-index:2; left:12px; bottom:10px; font-size:11.5px; color:var(--muted);
  background:color-mix(in srgb,var(--surface) 80%,transparent); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); padding:4px 9px; border-radius:8px; pointer-events:none;
}
#view-nodes .recenter{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  border:1px solid var(--accent); background:var(--surface); color:var(--accent);
  border-radius:999px; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-lg);
}
#view-nodes .recenter:hover{background:var(--accent); color:var(--on-accent)}

/* ---------------- inspector ---------------- */
#view-nodes .insp{background:var(--surface); border-left:1px solid var(--line); overflow-y:auto; overflow-x:hidden; min-height:0; padding:20px 18px 44px}
#view-nodes .insp *{max-width:100%}
#view-nodes .insp h2,#view-nodes .insp p,#view-nodes .insp blockquote,#view-nodes .lkmain .t,#view-nodes .tr .nm,#view-nodes .defn p{overflow-wrap:anywhere}
#view-nodes .insp .kicker{display:block; margin-bottom:4px}
#view-nodes .insp h2{font-family:var(--font-display); font-weight:750; font-size:21px; line-height:1.15; margin:2px 0 12px; letter-spacing:-.025em}
#view-nodes .insp .note{font-size:13px; color:var(--ink-2); background:var(--surface-2); border-left:3px solid var(--accent); padding:8px 11px; border-radius:0 9px 9px 0; margin:0 0 14px}
#view-nodes .hintline{font-size:11.5px; color:var(--muted); margin:14px 0 0}
#view-nodes .defn{background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:11px 13px 10px; margin:0 0 12px}
#view-nodes .defn h3,#view-nodes .quotes summary{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 5px; display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
#view-nodes .defn h3 .src{color:var(--muted); letter-spacing:.02em; text-transform:none; font-weight:500}
#view-nodes .defn h3 .src a{color:var(--theory); text-decoration:none; font-weight:600}
#view-nodes .defn h3 .src a:hover{text-decoration:underline}
#view-nodes .defn p{margin:0; font-size:14px; line-height:1.55; color:var(--ink)}
#view-nodes .defn.nodef p{font-size:13px; color:var(--muted); margin-bottom:8px}
#view-nodes .defn textarea{
  width:100%; font:inherit; font-size:13.5px; line-height:1.5; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink); resize:vertical; margin-bottom:6px;
}
#view-nodes .mini{border:0; background:none; padding:0; margin-top:7px; font-size:11.5px; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
#view-nodes .mini:hover{color:var(--accent)}
#view-nodes .quotes{margin:0 0 6px}
#view-nodes .quotes summary{cursor:pointer; list-style:none; color:var(--muted); padding:4px 0; justify-content:flex-start}
#view-nodes .quotes summary::-webkit-details-marker{display:none}
#view-nodes .quotes summary::before{content:"▸"; margin-right:6px}
#view-nodes .quotes[open] summary::before{content:"▾"}
#view-nodes .quotes blockquote{margin:6px 0 10px; padding:2px 0 2px 11px; border-left:2px solid color-mix(in srgb,var(--theory) 45%,var(--line)); font-size:12.8px; line-height:1.55; color:var(--ink-2)}
#view-nodes .quotes cite{display:block; font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:4px}
#view-nodes .quotes cite a{color:var(--theory); text-decoration:none; font-weight:600}
#view-nodes .quotes cite a:hover{text-decoration:underline}
#view-nodes .insp .intro{color:var(--ink-2); font-size:13.5px}
#view-nodes .insp .intro p{margin:0 0 10px}
#view-nodes .sec{margin-top:18px}
#view-nodes .sec h3{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 6px; display:flex; justify-content:space-between; align-items:baseline;
}
#view-nodes .sec h3 .c{color:var(--muted); letter-spacing:0}
#view-nodes .lk{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; border-radius:9px}
#view-nodes .lk:hover{background:var(--surface-2)}
#view-nodes .lkmain{
  display:grid; grid-template-columns:14px minmax(0,1fr); gap:4px 6px; align-items:start; width:100%; text-align:left;
  border:0; background:transparent; border-radius:9px; padding:7px 4px 8px 6px; cursor:pointer; font-size:13px; color:var(--ink);
}
#view-nodes .lk .pen{border:0; background:transparent; color:var(--muted); cursor:pointer; opacity:0; padding:7px 7px 0 4px; font-size:12px; line-height:1.2}
#view-nodes .lk:hover .pen,#view-nodes .lk .pen:focus-visible{opacity:1}
#view-nodes .lk .pen:hover{color:var(--accent)}
#view-nodes .why{grid-column:2; display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--muted); white-space:normal; overflow-wrap:anywhere; min-width:0}
#view-nodes .why i{font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:var(--muted); opacity:.85; margin-left:5px; white-space:nowrap}
#view-nodes .why i.th-link{color:var(--theory); opacity:1; font-weight:600; cursor:pointer; border-bottom:1px dotted currentColor}
#view-nodes .why.quote{padding-left:8px; border-left:2px solid var(--line); color:var(--ink-2)}
#view-nodes .why.chain{font-family:var(--font-mono); font-size:10.5px; line-height:1.5; color:var(--muted)}
#view-nodes .why.chain b{color:var(--ink-2); font-weight:600}
#view-nodes .why.none{font-style:italic; opacity:.75}
#view-nodes .lk.editing{display:block; padding:8px; background:var(--surface-2); border:1px solid var(--line)}
#view-nodes .lk.editing .why-head{font-size:12.5px; margin-bottom:6px; color:var(--ink-2)}
#view-nodes .lk.editing textarea{
  width:100%; font:inherit; font-size:13px; line-height:1.5; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink); resize:vertical; margin-bottom:6px;
}
#view-nodes .lk .ar{color:var(--muted); font-size:12px; line-height:1.4}
#view-nodes .lk .tp{grid-column:2; display:flex; gap:3px; flex-wrap:wrap}
#view-nodes .lk.on .ar{color:var(--accent); font-weight:700}
#view-nodes .tp span{
  font-family:var(--font-mono); font-size:10px; font-weight:600; padding:0 5px; border-radius:4px;
  color:var(--c,var(--muted)); background:color-mix(in srgb,var(--c,var(--muted)) 12%,transparent);
}
#view-nodes .tr{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:5px 4px; border-radius:8px; font-size:13px}
#view-nodes .tr:hover{background:var(--surface-2)}
#view-nodes .tr .tn{font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--c,var(--muted))}
#view-nodes .tr .acts{display:flex; gap:4px}
#view-nodes .tr .acts a,#view-nodes .tr .acts button{font-size:11.5px; padding:2px 8px}
#view-nodes .tr .acts a{border:1px solid color-mix(in srgb,var(--theory) 35%,var(--line)); border-radius:7px; text-decoration:none; color:var(--theory); font-weight:600}
#view-nodes .tr .acts a:hover{background:color-mix(in srgb,var(--theory) 10%,transparent)}
#view-nodes .tr.onmap .nm{font-weight:600}
/* a topic's chains, when a topic is shown in the panel */
#view-nodes .chead{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:14px 0 4px}
#view-nodes .cline{margin:3px 0 8px; font-size:13px; line-height:1.6}
#view-nodes a.cs{color:inherit; text-decoration:none; border-radius:4px}
#view-nodes a.cs.shared{color:var(--accent); font-weight:600}
#view-nodes a.cs:hover{background:var(--accent-soft)}
#view-nodes .car{color:var(--faint)}

/* ---------------- popover, modals (outside the view) ---------------- */
.pop{
  position:fixed; z-index:40; width:290px; max-height:60vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg); padding:8px;
}
.pop h4{margin:4px 6px 6px; font-size:10.5px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.pop button.opt{
  display:grid; grid-template-columns:auto 1fr; gap:8px; width:100%; text-align:left; align-items:baseline;
  border:0; background:transparent; padding:6px 7px; border-radius:8px; cursor:pointer; font-size:13px;
}
.pop button.opt:hover{background:var(--surface-2)}
.pop button.opt .tn{font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--nodes)}
.pop button.all{border-bottom:1px solid var(--line-2); border-radius:8px 8px 0 0; margin-bottom:4px; font-weight:600}

.modal{position:fixed; inset:0; z-index:50; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .12s ease-out}
.sheet{
  width:min(1040px,100%); max-height:100%; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg);
}
.sheet.small{width:min(560px,100%)}
.sheet-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px 10px}
.sheet-head h2{font-family:var(--font-display); font-weight:750; font-size:19px; margin:0; letter-spacing:-.025em}
.ed-meta{display:grid; grid-template-columns:1fr 220px; gap:8px 12px; padding:0 20px 12px}
.ed-meta label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--muted); font-weight:600}
.ed-meta .full{grid-column:1/-1}
.ed-meta input,.ed-meta select{font:inherit; font-size:13.5px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--ink)}
.ed-body{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; padding:0 20px; min-height:0; flex:1}
.ed-left{display:flex; flex-direction:column; min-height:0}
#ed-text,#bk-text{
  width:100%; min-height:340px; flex:1; resize:vertical; font-family:var(--font-mono); font-size:12.5px; line-height:1.65;
  padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); tab-size:2;
}
#bk-text{min-height:180px; margin:0 20px; width:auto}
.bk-p{margin:0 20px 10px; color:var(--ink-2); font-size:13px}
.ed-help{font-size:12px; color:var(--muted); margin:8px 0 0}
.ed-right{min-height:0; overflow-y:auto; max-height:52vh}
.ed-right h3{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:2px 0 6px}
.ed-steps .st{display:flex; gap:7px; align-items:baseline; font-size:12.5px; padding:3px 0; border-bottom:1px dashed var(--line-2)}
.ed-steps .mk{flex:none; width:10px; font-size:10px}
.ed-steps .st.link .mk{color:var(--p2)}
.ed-steps .st.solo .mk{color:var(--muted)}
.ed-steps .meta{margin-left:auto; flex:none; font-family:var(--font-mono); font-size:10.5px; color:var(--muted)}
.ed-steps .dym{display:block; font-size:11.5px; color:var(--muted)}
.ed-steps .dym button{border:0; background:none; padding:0; color:var(--nodes); cursor:pointer; font-size:11.5px; text-decoration:underline}
.sheet-foot{display:flex; gap:8px; align-items:center; padding:14px 20px 18px}
.sheet .ghost.danger:hover{border-color:var(--danger); color:var(--danger)}

/* ---------------- narrower windows ---------------- */
@media (max-width:1240px){ #view-nodes .shell{--rail:250px; --insp:310px} }
@media (max-width:1080px){ #view-nodes .shell{--rail:228px; --insp:288px} #view-nodes .brand .sub{display:none} }
/* the rail and the panel float OVER the map instead of stealing its height */
@media (max-width:940px){
  #view-nodes .shell{grid-template-columns:minmax(0,1fr)}
  #view-nodes .rail{
    position:absolute; z-index:22; top:0; bottom:0; left:0; width:290px; max-width:86vw;
    transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
  }
  body.rail-open #view-nodes .rail{transform:none}
  #view-nodes .scrim{position:absolute; inset:0; z-index:21; background:var(--scrim); display:none}
  body.rail-open #view-nodes .scrim{display:block}
  #view-nodes .insp{
    position:absolute; z-index:20; left:0; right:0; bottom:0; max-height:46%;
    border-left:0; border-top:1px solid var(--line); box-shadow:var(--shadow-lg); border-radius:16px 16px 0 0;
    padding:8px 16px 20px; transition:transform .22s ease;
  }
  body.insp-min #view-nodes .insp{transform:translateY(calc(100% - 40px))}
  #view-nodes .insp-bar{display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:2; background:var(--surface); padding:4px 0 6px; margin:0 0 4px}
  #view-nodes .insp-bar .t{flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #view-nodes .only-narrow{display:inline-flex!important}
  #view-nodes .bar{padding:11px 12px 15px; min-height:60px}
  .ed-body{grid-template-columns:1fr}
  .ed-meta{grid-template-columns:1fr}
}
@media (max-width:620px){
  #view-nodes .seg button{padding:5px 10px}
  #view-nodes .trail{order:3; width:100%}
  #view-nodes .hint{display:none}
}