/* nle — viewer / node space, an empty shot, the verbs on a clip.
   One section of the old nle.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- Viewer / Node space, and the way back ---------- */

html.desktop.nle-on .nle-vmode {
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; background: var(--card); border-bottom: 1px solid var(--border);
  /* Above the docked graph. This strip is the way out of it, so it is the one
     part of the region that must never be covered. */
  position: relative; z-index: 60;
}
html.desktop.nle-on .nle-vmode .sp { flex: 1; }
html.desktop.nle-on .nle-vm {
  padding: 3px 10px; border-radius: 3px; background: none; border: 1px solid transparent;
  color: var(--text-faint); font-family: inherit; font-size: 10px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; cursor: pointer;
}
html.desktop.nle-on .nle-vm:hover { color: var(--text-dim); border-color: var(--border); }
html.desktop.nle-on .nle-vm.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
html.desktop.nle-on .nle-bound {
  font-size: 10px; color: var(--text-faint); max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The mark and the words, on one line. Same glyph the node space's own
   insert button wears — one act, one picture, whichever room you are in. */
html.desktop.nle-on .nle-vuse {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 3px; background: var(--accent); border: 1px solid var(--accent);
  color: #fff; font-family: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
}
html.desktop.nle-on .nle-vuse svg { display: block; flex: none; }
html.desktop.nle-on .nle-vuse:hover { filter: brightness(1.12); }
html.desktop.nle-on .nle-vuse.hidden { display: none; }

/* ---------- an empty shot ----------

   Dashed and accented, so a sequence blocked out but not yet made reads at a
   glance as a plan rather than as a row of broken clips. `.missing` is red and
   dashed and means something else entirely — a file that should be here and is
   not — which is why the two never share a style. */

html.desktop.nle-on .nle-clip.shot {
  background: rgba(var(--accent-rgb), .07);
  border: 1px dashed var(--accent);
}
html.desktop.nle-on .nle-clip.shot .nle-clip-name { color: var(--accent); }
html.desktop.nle-on .nle-clip.shot .nle-clip-grad { background: none; }

html.desktop.nle-on .nle-clip-gen {
  position: absolute; right: 5px; bottom: 4px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(10, 10, 12, .74); border: 1px solid var(--border-dash);
  color: #dcdce2; font-family: inherit; font-size: 9px; font-weight: 800;
  letter-spacing: .3px; cursor: pointer; line-height: 1;
}
/* On a filled clip it is a corner badge that appears when you go near it —
   a permanent button over every thumbnail is a timeline you cannot read. On an
   empty shot it is the point of the clip and is always there. */
html.desktop.nle-on .nle-clip:not(.shot) .nle-clip-gen { opacity: 0; transition: opacity .12s; }
html.desktop.nle-on .nle-clip:not(.shot):hover .nle-clip-gen,
html.desktop.nle-on .nle-clip:not(.shot).sel .nle-clip-gen { opacity: 1; }
html.desktop.nle-on .nle-clip-gen.wide {
  left: 5px; right: auto; background: rgba(var(--accent-rgb), .16);
  border-color: var(--accent); color: var(--accent);
}
html.desktop.nle-on .nle-clip-gen:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- THE THREE VERBS ON A CLIP ----

   Bottom-left, opposite the Generate badge, and only while the pointer is on
   the clip. A timeline is read as a shape first — six rows of permanent
   buttons would bury the shape it exists to show — but the moment you are
   over one clip, everything you would want to do with that file is there
   rather than somewhere else in the app with the file name in your head. */
html.desktop.nle-on .nle-clip-acts {
  position: absolute; left: 5px; bottom: 4px; z-index: 3;
  display: flex; gap: 3px; opacity: 0; transition: opacity .12s;
}
html.desktop.nle-on .nle-clip:not(.shot):hover .nle-clip-acts { opacity: 1; }
html.desktop.nle-on .nle-ca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 16px; padding: 0; border-radius: 3px;
  background: rgba(10, 10, 12, .74); border: 1px solid var(--border-dash);
  color: #dcdce2; cursor: pointer; line-height: 1;
}
html.desktop.nle-on .nle-ca:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* A clip that is a whole node space says so, and says WHICH — the badge
   carries the space's name now rather than the word SPACE, because the name
   was being printed a second time in white across the picture underneath and
   one of the two had to go. The badge is the one that also marks the clip as
   different, which matters: without it this is an ordinary clip that
   mysteriously opens a graph on double-click, and trimming it trims the
   rendered file rather than anything in the graph.

   A name can be long and a clip can be narrow, so it stops at the clip's edge
   with an ellipsis rather than running out of the tile. Upper case is gone
   with the single word — a name is read, not scanned. */
html.desktop.nle-on .nle-clip-space {
  position: absolute; left: 5px; top: 4px; right: 5px; z-index: 3;
  width: fit-content; max-width: calc(100% - 10px);
  background: var(--accent); color: #fff; border-radius: 3px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 5px; line-height: 1.25; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A narrow clip cannot hold three buttons AND the duration, so the verbs win:
   the duration is written on the ruler and in the clip's tooltip as well. */
html.desktop.nle-on .nle-clip:hover .nle-clip-dur { opacity: 0; }

/* Right-click: where is this file. */
.nle-clipmenu {
  position: fixed; z-index: 400; min-width: 152px; padding: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5); display: flex; flex-direction: column;
}
.nle-clipmenu button {
  background: none; border: none; color: var(--text); text-align: left;
  font-family: inherit; font-size: 11px; padding: 6px 8px; border-radius: 3px; cursor: pointer;
}
.nle-clipmenu button:hover { background: var(--accent); color: #fff; }

/* Empty space on a track is now a thing you click, so it says so. */
html.desktop.nle-on.nle-tool-select .nle-track { cursor: copy; }
html.desktop.nle-on .nle-tl-btn.accent { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-tl-hint {
  font-size: 9.5px; color: var(--text-faint); white-space: nowrap;
}
/* The duration moves out of the Generate button's way on an empty shot —
   they both want the bottom-left corner and the button is the bigger claim. */
html.desktop.nle-on .nle-clip.shot .nle-clip-dur { left: auto; right: 7px; }

/* The second-screen button, on the strip above the shared viewer — the one
   surface that is on screen in every view. Quiet until it is doing something:
   lit while a window is open on the other display. */
html.desktop.nle-on .nle-vpop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0; border-radius: 3px;
  background: none; border: 1px solid var(--border); color: var(--text-faint);
  cursor: pointer;
}
html.desktop.nle-on .nle-vpop svg { display: block; flex: none; }
html.desktop.nle-on .nle-vpop:hover { color: var(--text); border-color: var(--text-dim); }
html.desktop.nle-on .nle-vpop.on {
  color: #fff; background: var(--accent); border-color: var(--accent);
}