/* Neural map — same visual language as LifeMap, different subject.
   Colours come from the shared --lm-* and type variables so the two maps read
   as one product. */

.neural-mode #content { padding: 0; }

/* The wrap owns the viewport height and divides it: bar and ask panel take
   what they need, the graph takes the rest. Without min-height:0 the grid
   below refuses to shrink and the whole column overflows the page. */
.nm-wrap { display:flex; flex-direction:column; height:calc(100vh - 128px); min-height:380px; overflow:hidden; }

.nm-bar {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--lm-line, rgba(127,140,160,.22));
}
.nm-sel {
  background:var(--lm-surface, rgba(127,140,160,.08));
  color:var(--text); border:1px solid var(--lm-line, rgba(127,140,160,.26));
  border-radius:7px; padding:6px 10px; font-family:inherit; font-size:13.5px;
}
.nm-btn {
  background:none; border:1px solid var(--lm-line, rgba(127,140,160,.26));
  color:var(--text); border-radius:7px; padding:6px 11px; cursor:pointer;
  font-family:inherit; font-size:13px;
}
.nm-btn:hover { border-color:var(--lm-line-strong, rgba(127,140,160,.5)); }
.nm-q { font-size:12.5px; color:var(--lm-dim, var(--muted)); font-style:italic; }
.nm-spacer { flex:1; }
.nm-stats { font-size:11.5px; color:var(--lm-faint, var(--faint)); }

/* Canvas takes the height it is given; the drawer is a fixed column beside it
   rather than an overlay, so a profile can be read while the graph moves. */
.nm-body { flex:1 1 auto; min-height:160px; display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:0; }
/* The svg is pinned inside the canvas rather than sized at 100%: an svg with
   no intrinsic height in a grid cell resolves to its content and pushes the
   panel below it off the page. */
.nm-canvas { position:relative; min-width:0; overflow:hidden; }
#nmGraph { position:absolute; inset:0; width:100%; height:100%; display:block; }

.nm-link { stroke:var(--lm-line-strong, rgba(138,147,166,.55)); }
.nm-link:hover { stroke:var(--viola-lt, #45BCE2); }
.nm-label { fill:var(--lm-ink, var(--text)); font-size:11.5px; pointer-events:none; }

.nm-legend {
  position:absolute; left:12px; bottom:10px; z-index:2; display:flex; flex-wrap:wrap; gap:6px;
  max-width:70%; align-items:center;
}
.nm-leg {
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  background:var(--lm-surface, rgba(20,24,32,.72)); color:var(--text);
  border:1px solid var(--lm-line, rgba(127,140,160,.26)); border-radius:999px;
  font-size:11.5px; cursor:pointer; font-family:inherit;
}
.nm-leg.off { opacity:.4; }
.nm-leg.static { cursor:default; color:var(--lm-dim, var(--muted)); }
.nm-leg i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.nm-leg-sep { width:1px; height:16px; background:var(--lm-line, rgba(127,140,160,.26)); }

.nm-drawer {
  border-left:1px solid var(--lm-line, rgba(127,140,160,.22));
  padding:14px 16px; overflow-y:auto; font-size:13px;
}
.nm-drawer-empty { color:var(--lm-faint, var(--faint)); font-size:12.5px; padding-top:20px; }
.nm-dh { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.nm-chip { width:11px; height:11px; border-radius:50%; display:inline-block; }
.nm-desc { margin:6px 0 10px; color:var(--text); line-height:1.5; }
.nm-sub { font-size:11.5px; color:var(--lm-dim, var(--muted)); margin-top:2px; }
.nm-n { font-size:11px; color:var(--lm-faint, var(--faint)); font-weight:400; }
.nm-drawer h4 { margin:16px 0 6px; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lm-dim, var(--muted)); font-weight:600; }
.nm-item {
  padding:8px 0; border-bottom:1px solid var(--lm-line, rgba(127,140,160,.16));
  line-height:1.45;
}
.nm-item blockquote {
  margin:0 0 4px; padding-left:10px;
  border-left:2px solid var(--lm-line-strong, rgba(138,147,166,.5));
  color:var(--text); font-style:italic;
}

/* An unreviewed record must look unreviewed. */
.nm-review { font-size:10.5px; padding:2px 7px; border-radius:999px; border:1px solid; }
.nm-proposed   { color:#f3d37a; border-color:rgba(243,211,122,.45); }
.nm-confirmed  { color:#1C8051; border-color:rgba(28,128,81,.5); }
.nm-rejected   { color:#D40000; border-color:rgba(212,0,0,.45); }
.nm-needs-work { color:#ffb22e; border-color:rgba(255,178,46,.45); }

/* Gaps are findings. Missing evidence gets the same weight as a warning, not
   a blank space that reads as "fine". */
.nm-warn { font-size:11.5px; color:#ffb22e; margin-top:3px; }

/* [hidden] has to beat the display:flex below, or the empty state shows on
   top of a populated graph. */
.nm-empty[hidden] { display:none; }
.nm-empty {
  position:absolute; inset:0; display:flex; flex-direction:column; gap:6px;
  align-items:center; justify-content:center; text-align:center;
  color:var(--lm-faint, var(--faint)); font-size:13px; padding:0 40px; pointer-events:none;
}
.nm-empty b { color:var(--text); font-size:14px; }

@media (max-width: 900px) {
  .nm-body { grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto; }
  .nm-drawer { border-left:none; border-top:1px solid var(--lm-line, rgba(127,140,160,.22)); max-height:45vh; }
  .nm-legend { max-width:92%; }
}

/* The request panel. Deliberately below the canvas rather than floating over
   it: reading the scope is a separate act from reading the graph. */
/* The ask panel takes what it needs but never more than a third of the
   column: an open scope form must not push the graph off screen. */
.nm-ask { flex:0 1 auto; max-height:46%; overflow-y:auto;
  border-top:1px solid var(--lm-line, rgba(127,140,160,.22)); padding:10px 14px; }
.nm-ask-row { display:flex; gap:8px; align-items:flex-start; }
.nm-ask textarea {
  flex:1; resize:none; background:var(--lm-surface, rgba(127,140,160,.08));
  color:var(--text); border:1px solid var(--lm-line, rgba(127,140,160,.26));
  border-radius:8px; padding:9px 11px; font-family:inherit; font-size:13.5px; line-height:1.4;
}
.nm-btn.nm-sm { padding:3px 9px; font-size:11.5px; }

.nm-scope { margin-top:10px; border:1px solid var(--lm-line, rgba(127,140,160,.26)); border-radius:8px; padding:10px 12px; }
.nm-scope-head { font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lm-dim, var(--muted)); margin-bottom:8px; }
.nm-scope-row { display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; align-items:start; margin-bottom:6px; }
.nm-scope-row label { font-size:12px; color:var(--lm-dim, var(--muted)); padding-top:6px; }
.nm-scope-row textarea {
  resize:vertical; background:var(--lm-surface, rgba(127,140,160,.06));
  color:var(--text); border:1px solid var(--lm-line, rgba(127,140,160,.22));
  border-radius:6px; padding:6px 9px; font-family:inherit; font-size:12.5px;
}
/* The panel scrolls, and a long scope pushed "start research" past its bottom
   edge — an action you cannot see is an action you do not take. The row rides
   the bottom of the scrollport instead, opaque so the fields pass behind it. */
.nm-scope-actions { display:flex; gap:8px; margin-top:8px;
  position:sticky; bottom:-10px; padding:8px 0 10px;
  background:var(--bg, #f6f7fa); }

.nm-prog { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px;
  color:var(--lm-dim, var(--muted)); }
.nm-prog-state { font-size:10.5px; padding:2px 7px; border-radius:999px; border:1px solid; }
.nm-running   { color:#45BCE2; border-color:rgba(69,188,226,.45); }
.nm-done      { color:#1C8051; border-color:rgba(28,128,81,.5); }
.nm-cancelled { color:#ffb22e; border-color:rgba(255,178,46,.45); }
.nm-failed    { color:#D40000; border-color:rgba(212,0,0,.45); }
.nm-draft     { color:var(--lm-faint, var(--faint)); border-color:rgba(127,140,160,.3); }

/* Three panes share the side column: detail, compare, commonplace book. */
.nm-side { display:flex; flex-direction:column; min-height:0;
  border-left:1px solid var(--lm-line, rgba(127,140,160,.22)); }
.nm-side .nm-drawer { border-left:none; flex:1; }
.nm-tabs { display:flex; gap:2px; padding:8px 10px 0; border-bottom:1px solid var(--lm-line, rgba(127,140,160,.18)); }
.nm-tab { background:none; border:none; border-bottom:2px solid transparent;
  color:var(--lm-dim, var(--muted)); font-family:inherit; font-size:12px; padding:5px 10px;
  cursor:pointer; }
.nm-tab.on { color:var(--text); border-bottom-color:var(--viola-lt, #45BCE2); }

/* A roster chosen on success cannot show what caused it. That warning is part
   of the result, not a footnote. */
.nm-caution { margin:12px 0; padding:9px 11px; font-size:11.5px; line-height:1.5;
  border-left:2px solid #ffb22e; background:rgba(255,178,46,.07); color:var(--lm-dim, var(--muted)); }

.nm-book-new { display:flex; flex-direction:column; gap:6px; padding-bottom:10px;
  border-bottom:1px solid var(--lm-line, rgba(127,140,160,.18)); margin-bottom:10px; }
.nm-book-new textarea, .nm-book-new input {
  background:var(--lm-surface, rgba(127,140,160,.08)); color:var(--text);
  border:1px solid var(--lm-line, rgba(127,140,160,.26)); border-radius:7px;
  padding:7px 9px; font-family:inherit; font-size:12.5px; resize:vertical; }

/* Your words look like yours: upright, in the text colour, on a tinted rail.
   Source excerpts are italic behind a plain rule. The difference is the point. */
.nm-note { border-left:2px solid var(--viola-lt, #45BCE2); padding-left:9px; }
.nm-note-body { color:var(--text); white-space:pre-wrap; line-height:1.5; }
.nm-tag { font-size:10.5px; padding:1px 6px; border-radius:999px;
  border:1px solid var(--lm-line, rgba(127,140,160,.3)); }

/* Lens column headings. Quiet: they label the arrangement, they are not data. */
.nm-glabel { fill:var(--lm-dim, var(--muted)); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; pointer-events:none; }

.nm-scope-check { display:flex; align-items:center; gap:7px; font-size:12px;
  color:var(--lm-dim, var(--muted)); margin:4px 0; cursor:pointer; }
.nm-scope-check input { accent-color:var(--viola-lt, #45BCE2); }

/* The roster, shown before collection so the selection can be argued with. */
.nm-roster { margin:8px 0; display:flex; flex-direction:column; gap:7px; }
.nm-rost { padding:6px 0; border-bottom:1px solid var(--lm-line, rgba(127,140,160,.16)); }
.nm-rost b { margin-right:7px; }

/* The app shell lowercases everything for its own chrome, and that cascaded
   into Neural: "I had to modify my plans… go to Paris" displayed as "i had
   to modify my plans… go to paris". A quotation shown in the wrong case is
   no longer verbatim. Neural's own labels are already written in lowercase,
   so turning the transform off here changes only text that came from a
   source. Headings that ask for uppercase still get it. */
.nm-wrap { text-transform: none; }

.nm-proposed-attrs { margin: 4px 0 10px; padding: 7px 9px; font-size: 12px; line-height: 1.55;
  border: 1px dashed var(--lm-line, rgba(127,140,160,.35)); border-radius: 7px; }
.nm-proposed-attrs .nm-sub { display: inline-block; min-width: 88px; margin-top: 0; }

/* A year in front of a finding: profiles read in time order. */
.nm-when { font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 6px; margin-right: 4px;
  border-radius: 999px; border: 1px solid var(--lm-line, rgba(127,140,160,.35));
  color: var(--lm-dim, var(--muted)); }