/* nle — the node space viewer folding away, and shared zoom/pan.
   One section of the old nle.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- THE NODE SPACE'S OWN VIEWER FOLDS AWAY WHILE DOCKED ----------

   Three previewers were competing for one job: this shell's viewer, the node
   space's side pane, and the full-screen gallery modal. The shell's is the
   biggest surface the app has and it is on screen at all times — so while the
   graph is docked beside it, the graph's own pane is redundant, and having
   both meant looking at a 300px copy of something that was already a metre
   wide next to it.

   Hidden rather than removed: the graph is still a full-window room in After
   Effects and with the shell off, and there the pane is the only viewer there
   is. Its seam goes with it, because a handle that resizes something invisible
   is a handle that does nothing. */

html.desktop.nle-on.nle-dock #nd-preview,
html.desktop.nle-on.nle-dock #nd-pv-rz { display: none !important; }

/* The strip above the viewer is a label and a hand-back button now — the
   Viewer / Node space tabs went with the rail moving to the window's edge,
   where it is always visible. Two sets of buttons for one job a foot apart is
   a second place to look. */
html.desktop.nle-on .nle-vlabel {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-faint); padding: 3px 2px;
}

/* ---------- zoom and pan in the shared viewer ---------- */

html.desktop.nle-on .nle-stage { cursor: default; }
html.desktop.nle-on #nle-viewer.panning,
html.desktop.nle-on #nle-viewer.panning * { cursor: grabbing !important; }
/* The picture is transformed, so it has to be free to leave the frame — and
   the frame has to clip it rather than grow a scrollbar. */
html.desktop.nle-on .nle-stage { overflow: hidden; }
html.desktop.nle-on #nle-canvas,
html.desktop.nle-on video.nle-nv-media { will-change: transform; }
/* NOT ON A STILL. Simon, 23 Sep 2026: "When I scroll in, it doesn't appear
   full res ... loading full resolution for a moment, but then, when I
   re-scroll, it doesn't maintain the same detail." will-change: transform
   tells Chromium to raster the layer once, at the size it first appeared,
   and scale that bitmap from then on -- so a zoomed still was its fitted-size
   copy blown up, with the odd re-raster showing the real pixels for a moment.
   Measured in tests/viewer-zoom-sharp.mjs: one-pixel stripes at ~2.5x came
   back at 64 (grey-ish) with it and 93 (near the 104 ceiling) without. A
   video frame is a texture the compositor samples at full size either way,
   so the hint stays on video, where it smooths panning and costs nothing. */
/* THE ZOOM CHIP IS GONE. It read the CSS scale sitting on top of an
   already-fitted picture, so it said 100% at whatever fit happened to be --
   see the note in js/nleedit.js applyZoom. Nothing replaces it. */

/* ---------- A / B, IN THE VIEWER EVERYBODY IS LOOKING AT ----------

   The node space has drawn its own wipe for a while, into #nd-preview — which
   is display:none the whole time the graph is docked beside this viewer (see
   the top of this file). So two things wired into a compare node showed one of
   them, with no divider, in the only viewer on screen. This is that wipe, here.

   Both frames in the same box at the same scale, B clipped from the divider
   rightwards, so the only thing that changes across the line is the picture. */
html.desktop.nle-on .nle-cmp {
  position: absolute; inset: 0; overflow: hidden; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
html.desktop.nle-on .nle-cmp-l,
html.desktop.nle-on .nle-cmp-r {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
html.desktop.nle-on .nle-cmp img,
html.desktop.nle-on .nle-cmp video {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  /* The press belongs to the divider, not to the picture under it. */
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
/* A hairline with a grab in the middle of it. White, deliberately not the
   brand colour: the divider is furniture, and a comparison is about the two
   pictures rather than about the line between them. */
html.desktop.nle-on .nle-cmp-bar {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  pointer-events: none;
}
html.desktop.nle-on .nle-cmp-bar span {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
html.desktop.nle-on .nle-cmp-tag {
  position: absolute; bottom: 10px; z-index: 3; pointer-events: none;
  background: rgba(0, 0, 0, .62); color: #e9e9ef;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 3px;
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.desktop.nle-on .nle-cmp-tag.l { left: 10px; }
html.desktop.nle-on .nle-cmp-tag.r { right: 10px; }