/* nle — the inspector, and insert floating over the frame.
   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 FX panel (#nle-inspector), nested at the foot of #nle-bin ----------

   This used to be its own grid column beside the viewer, folded by shrinking
   its WIDTH to nothing (--nle-w-insp). It is not a column any more — see
   js/nle.js's mount() and the note there about Simon's FX-panel request — so
   the fold is a HEIGHT fold now: the header stays put as a closed drawer's
   face, the body collapses.

   flex: none, not the default. #nle-bin is itself a flex column
   (.nle-region), and this is its last child sitting below the flexible,
   scrolling .nle-browser — without flex:none the panel's own min-height:0
   (inherited from .nle-region) would let a tight window squeeze it to
   nothing instead of squeezing the scrollable list above it, which is
   backwards: Timelines/Media already know how to scroll under pressure, a
   handful of sliders does not. */
html.desktop.nle-on #nle-inspector {
  flex: none;
  max-height: 300px;
  border-top: 1px solid var(--border);
}
html.desktop.nle-on #nle-inspector .nle-body { overflow-y: auto; }
/* Folded: the body goes, the header — with its own toggle — stays, same
   drawer-face idea the bin fold already uses one level up. */
html.nle-inspfolded.desktop.nle-on #nle-inspector { max-height: none; flex: none; }
html.nle-inspfolded.desktop.nle-on #nle-inspector .nle-body { display: none; }

html.desktop.nle-on .nle-insp-name {
  font-size: 11.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.desktop.nle-on .nle-insp-sub {
  font-size: 9.5px; color: var(--text-faint); margin: 3px 0 12px;
  font-variant-numeric: tabular-nums;
}
html.desktop.nle-on .nle-ctrl {
  display: grid; grid-template-columns: 1fr auto auto; gap: 3px 6px;
  align-items: center; margin-bottom: 9px;
}
html.desktop.nle-on .nle-ctrl label { font-size: 10px; color: var(--text-dim); }
/* Where the four transform properties went, standing where they used to be —
   a panel that quietly loses half its contents reads as a bug rather than as
   a move. See FX_PROPS in js/nleedit.js. */
html.desktop.nle-on .nle-insp-fxnote {
  font-size: 9.5px; line-height: 1.45; color: var(--text-faint);
  border: 1px dashed var(--border); border-radius: 3px;
  padding: 6px 8px; margin: 2px 0 10px;
}
html.desktop.nle-on .nle-ctrl-num {
  font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums;
}
html.desktop.nle-on .nle-ctrl input[type=range] {
  grid-column: 1 / -1; width: 100%; height: 3px;
  -webkit-appearance: none; appearance: none;
  background: var(--border-dash); border-radius: 2px; outline: none;
}
html.desktop.nle-on .nle-ctrl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
}
/* THE KEYFRAME DIAMOND — one per property row (Position/Scale/Rotation/
   Opacity), stamps or updates a CovertKeys keyframe for that one property at
   the playhead's current clip-local frame. Hollow when the property has no
   keyframes yet (dragging the slider still just edits the flat value);
   filled once it does (dragging the slider from then on writes a keyframe at
   the current frame instead — see renderInspector's kf.onclick/rng.oninput). */
html.desktop.nle-on .nle-kf {
  width: 18px; height: 18px; padding: 0; border-radius: 3px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-faint);
  font-size: 10px; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
html.desktop.nle-on .nle-kf:hover { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-kf.on { color: var(--accent); border-color: var(--accent); background: var(--card-hover, var(--card)); }
html.desktop.nle-on .nle-insp-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
html.desktop.nle-on .nle-ibtn {
  padding: 5px 9px; border-radius: 3px; background: var(--card);
  border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
html.desktop.nle-on .nle-ibtn:hover { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-ibtn.danger:hover { color: #fff; background: var(--red, var(--danger)); border-color: var(--red, var(--danger)); }

/* ---------- Masking — a live reference to a Roto/Mask node ---------- */
html.desktop.nle-on .nle-insp-mask {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-dash);
}
html.desktop.nle-on .nle-insp-mask-h {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 7px;
}
html.desktop.nle-on .nle-mask-pick {
  width: 100%; font: inherit; font-size: 10.5px; padding: 5px 7px;
  border-radius: 3px; background: var(--card); border: 1px solid var(--border);
  color: var(--text); margin-bottom: 6px;
}
html.desktop.nle-on .nle-mask-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
html.desktop.nle-on .nle-mask-row label {
  font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 5px;
}
html.desktop.nle-on .nle-mask-empty {
  font-size: 10px; color: var(--text-faint); font-style: italic;
}

/* ==================================================================
   THE NODE SPACE, DOCKED OVER THE VIEWER.

   #ndmod is `position: fixed` and sized against the window — correct when it
   is a room and wrong when it is the middle of an edit. Under `.nle-dock` the
   same element is pinned to a rect js/nle.js measures from the viewer and
   inspector columns, so the timeline, the shots and the generation panel stay
   exactly where they were and the graph sits in the picture's place.

   NOT REPARENTED, DELIBERATELY. Moving a 6,700-line workspace into a grid cell
   would give it a new containing block, a new stacking context and an
   `overflow: hidden` ancestor, and every absolutely-positioned thing inside it
   — the wires, the zoom bar, the node menu, the preview — would move. Four
   numbers is the whole change.

   z-index 40: above the region it covers, below #railnav at 300, so the way
   out of the app is never underneath something you opened inside it.
   ================================================================== */

html.desktop.nle-on.nle-dock #ndmod {
  top: var(--nle-dock-t, 0px);
  left: var(--nle-dock-l, 0px);
  width: var(--nle-dock-w, 100%);
  height: var(--nle-dock-h, 100%);
  right: auto; bottom: auto;
  z-index: var(--z-sticky);
  border-left: 1px solid var(--border);
  /* AND A LINE ALONG THE BOTTOM, where the graph ends and the timeline
     begins.

     Simon: "there's no line there so it feels messy."

     There is a line everywhere else, and it is the grid's own: 01-grid.css
     sets `gap: 1px` over a border-coloured background, so every seam between
     two panes is a gap showing the background through. This pane is the one
     exception — it is `position: fixed`, painted OVER the grid rather than
     laid out in it, so it covers the gap it should be sitting above. Every
     other edge of it happens to be against something that draws its own
     line; the bottom edge is against the timeline, which does not.

     The left border above was added for the same reason and stopped one
     edge short. */
  border-bottom: 1px solid var(--border);
}
/* THE RULE THAT WAS EATING THE NODE VIEW.

   This blanked the whole stage while the graph was up, from the era when the
   graph docked ON TOP OF the viewer region — the canvas peeked out at the
   edges wherever the dock rect and the region rounded differently, so the
   stage was hidden. Since the graph moved into the make column the viewer is
   its own panel beside it and there is nothing to hide from.

   But #nle-nodeview lives INSIDE .nle-stage, and visibility is inherited. So
   in node view the picture was painted, measured 100% inside the glass, and
   was invisible — which is every "node viewer still not working" report, and
   why each logic fix under it changed nothing and every test passed:
   getBoundingClientRect is the same for a hidden element as for a shown one.

   The transport comes back with it. The viewer is a viewer in both modes now;
   there is no reason for half of it to disappear. */
html.desktop.nle-on #nle-viewer.nle-in-node .nle-stage,
html.desktop.nle-on #nle-viewer.nle-in-node .nle-nodeview,
html.desktop.nle-on #nle-viewer.nle-in-node .nle-transport { visibility: visible; }
/* .nle-viewbar used to need a line here too — it lived inside #nle-viewer and
   needed the same un-hide. Its contents (the meta line and settings button)
   have since moved to the timeline bar, outside #nle-viewer entirely, so
   nothing here has to know about them any more. */

/* The two things worth doing with a generation you are looking at, on the
   viewer's own bar. Right-aligned, so the sequence name keeps the left where
   a title belongs and these read as actions rather than as a label. */
html.desktop.nle-on .nle-vins { margin-left: auto; display: flex; gap: 5px; }
html.desktop.nle-on .nle-vins.hidden { display: none; }
html.desktop.nle-on .nle-vinsb {
  font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text-dim);
}
html.desktop.nle-on .nle-vinsb:hover { color: var(--text); border-color: var(--accent); }

/* A TOOL PARKED IN THE VIEWER.

   The host fills the stage; the room inside it already knows how to fill a
   host, because `.in-viewer` is the same class the node space uses. While a
   tool is up the viewer's own picture stands down - stacking the two gives
   the room whatever height is left over, which is often none, and a crop
   stage with no height lays its picture out at the wrong scale and reads as
   the image never having loaded. */
/* `toolhost`, not `tool`. `.nle-tool` was already taken — it is a 26x24
   toolbar BUTTON in the transport — so the host inherited a button's size and
   came out 26x24 inside a 700x558 stage, which reads exactly like the room
   failing to load. Longhand offsets rather than `inset` for the same reason
   the rest of this file uses them: CEP 11 is Chromium 88. */
html.desktop.nle-on .nle-toolhost {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 8;
}
html.desktop.nle-on .nle-toolhost.hidden { display: none; }
html.desktop.nle-on #nle-viewer.nle-tooling #nle-canvas,
html.desktop.nle-on #nle-viewer.nle-tooling #nle-nodeview,
html.desktop.nle-on #nle-viewer.nle-tooling .nle-transport { visibility: hidden; }
/* The room fills the host rather than the window, whichever host has it. */
html.desktop.nle-on #cumod.in-viewer,
html.desktop.nle-on #cvmod.in-viewer,
html.desktop.nle-on #pointpick.in-viewer,
html.desktop.nle-on #skmod.in-viewer,
html.desktop.nle-on #lumatl.in-viewer {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
}
/* And the same for any room the host adopts, named or not. The list above is
   a list of the rooms that existed when it was written, and a room left off
   it does not merely look wrong — it lays out at its natural height, spills
   past the panel's bottom edge, and hands its lower band to the seam grip,
   which sits at z-index 300 and swallows every press. Scoped to a direct
   child of the host so a room parked anywhere else is untouched. */
html.desktop.nle-on .nle-toolhost > .in-viewer {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
}