/* nle — the viewer and sequence settings.
   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 viewer ---------- */

html.desktop.nle-on #nle-viewer { padding: 0; }
html.desktop.nle-on .nle-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #08080a; padding: 10px;
}
/* OUT OF BOUNDS, WHILE YOU ARE WORKING IN THE CUT. See the note on
   paintGizmo in js/nleedit.js. The stage and the frame were #08080a and
   #000 — a difference of two values nobody can see, so on a dark shot there
   was no telling where the picture stopped. Lifted only while something is
   selected: a permanently grey surround is a worse place to judge a
   picture, and this is for the moment you are pushing something towards an
   edge you cannot find. */
html.desktop.nle-on .nle-stage.nle-pb { background: #24242a; }

html.desktop.nle-on #nle-canvas {
  max-width: 100%; max-height: 100%;
  /* The picture is the thing being judged. A border round it competes with
     what is inside it; a shadow says "this is the frame" without drawing a
     line the eye has to discount. */
  box-shadow: 0 6px 30px var(--scrim-heavy);
  background: #000;
}
html.desktop.nle-on .nle-say {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(8px);
  background: rgba(20, 20, 24, .95); border: 1px solid var(--border);
  border-radius: 3px; padding: 6px 14px; font-size: 11px; color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
html.desktop.nle-on .nle-say.on { opacity: 1; transform: translateX(-50%) translateY(0); }

html.desktop.nle-on .nle-transport {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--card); border-top: 1px solid var(--border);
}
html.desktop.nle-on .nle-transport .sp { flex: 1; }
html.desktop.nle-on .nle-tools { display: flex; gap: 3px; }
html.desktop.nle-on .nle-tool {
  width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--text-faint); cursor: pointer;
}
html.desktop.nle-on .nle-tool:hover { color: var(--text); border-color: var(--border); }
html.desktop.nle-on .nle-tool.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

html.desktop.nle-on .nle-tbtn {
  width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-dim); cursor: pointer;
}
html.desktop.nle-on .nle-tbtn:hover { color: var(--text); border-color: var(--border-dash); }
html.desktop.nle-on .nle-tbtn.play { width: 34px; color: var(--text); }
/* The frame upscale. Disabled while its job is in flight -- it spends money
   and takes a few seconds, and a second press would buy the same frame
   twice. Dimmed rather than hidden, so the row does not reflow mid-press. */
html.desktop.nle-on .nle-tbtn.nle-up2x:hover { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-tbtn.nle-up2x:disabled { opacity: .45; cursor: default; }
html.desktop.nle-on .nle-tbtn.nle-up2x:disabled:hover { color: var(--text-dim); border-color: var(--border); }
html.desktop.nle-on .nle-tbtn.play:hover { border-color: var(--accent); color: var(--accent); }
html.desktop.nle-on .nle-timecode {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
html.desktop.nle-on .nle-timecode .sep { color: var(--text-faint); margin: 0 2px; }

/* THE SOUND SWITCH. Simon: "we need it so, by default, the playing videos in
   the timeline also play the audio" -- so there has to be a way to say no,
   and it sits after the timecode rather than beside play: it is a standing
   preference about the room, not a transport verb, and the three buttons at
   the left read as one group.

   Off is DIM, not red. A silenced timeline is a choice somebody made, not a
   fault, and the crimson in this app means "this is the thing that is
   happening" -- which is the wrong sentence for a switch in its quiet
   position. On is the ordinary button; off just recedes. */
html.desktop.nle-on .nle-tbtn.nle-mute { margin-left: 10px; }
html.desktop.nle-on .nle-tbtn.nle-mute.off { color: var(--text-faint); border-color: var(--border); }
html.desktop.nle-on .nle-tbtn.nle-mute.off:hover { color: var(--text-dim); }
/* THE VOLUME SLIDER (nleedit.js wireVolume): slides out to the right of the
   speaker while the pointer is over either, and stays out while dragging. */
html.desktop.nle-on .nle-volwrap { display: inline-flex; align-items: center; margin-left: 10px; }
html.desktop.nle-on .nle-volwrap .nle-tbtn.nle-mute { margin-left: 0; }
html.desktop.nle-on .nle-volpop { display: inline-flex; align-items: center; width: 0; overflow: hidden; opacity: 0;
  transition: width .15s ease, opacity .15s ease; }
html.desktop.nle-on .nle-volwrap:hover .nle-volpop,
html.desktop.nle-on .nle-volwrap.drag .nle-volpop,
html.desktop.nle-on .nle-volwrap:focus-within .nle-volpop { width: 84px; opacity: 1; }
html.desktop.nle-on .nle-voltrack { position: relative; flex: none; width: 70px; height: 16px; margin: 0 6px 0 8px; cursor: pointer; touch-action: none; }
html.desktop.nle-on .nle-voltrack::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 3px;
  border-radius: 2px; background: var(--border); }
html.desktop.nle-on .nle-volfill { position: absolute; left: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--accent); }
html.desktop.nle-on .nle-volfill::after { content: ''; position: absolute; right: -5px; top: -3.5px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }

/* THE SCRUB BAR — one thin strip, above the buttons, for whatever
   activePlayer() (js/nleedit.js) says is on screen: the cut's own playhead,
   or the real video/audio currently painted into #nle-nodeview. Simon: "put
   the timeline just above that play button so you can scrub there." */
html.desktop.nle-on .nle-scrub {
  flex: none; position: relative; height: 4px; margin: 0 10px;
  background: var(--border); border-radius: 3px; cursor: pointer;
}
html.desktop.nle-on .nle-scrub:hover { height: 6px; margin-top: -1px; margin-bottom: -1px; }
html.desktop.nle-on .nle-scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--accent); border-radius: 3px; pointer-events: none;
}
/* Nothing scrubbable to show — a still image, an empty timeline — dimmed
   and inert rather than hidden, so the row above the buttons does not jump
   the whole strip up and down as the subject changes. */
html.desktop.nle-on .nle-scrub.disabled { opacity: .35; cursor: default; pointer-events: none; }
/* The transport buttons go the same way when there is nothing at all to
   act on (activePlayer() returned null — a still, or a compare wipe). */
html.desktop.nle-on .nle-tbtn.disabled { opacity: .35; pointer-events: none; }
/* The .nle-viewbar strip that used to live here — the sequence name, the
   "1920×1080 · 24 fps · N clips" meta line and its settings button, and the
   settings popover — has moved to the timeline bar, next to the timeline
   title. See css/nle/11-timeline.css and js/nleedit.js's buildTimeline(). */

/* ---------- the transform gizmo ----------
   Handles over the picture for the selected clip: four corners to scale, a
   knob on a stalk to rotate, the body to move. Geometry is all set from
   js/nleedit.js's paintGizmo() — everything here is colour, size and the
   one rule that matters functionally:

   POINTER-EVENTS ARE OFF, ON EVERY PART OF IT. The press is decided
   geometrically against the clip's real rectangle, exactly as cropvid.js
   decides its own grips, and for the same reason: a handle that swallows
   its own press has to re-derive which handle it was and cannot answer "you
   pressed 3px outside the corner, which still counts". Letting the layer
   eat clicks would also make the picture underneath unselectable wherever a
   handle happened to sit. */
html.desktop.nle-on .nle-giz {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 4;
}
html.desktop.nle-on .nle-giz.hidden { display: none; }
html.desktop.nle-on .nle-giz-svg { position: absolute; left: 0; top: 0; overflow: visible; }
html.desktop.nle-on .nle-giz-out {
  fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
html.desktop.nle-on .nle-giz-stalk { stroke: var(--accent); stroke-width: 1.5; }
/* Square corners, round rotate knob — the two gestures are different and
   should not look interchangeable. Both are translated onto their point
   rather than offset by half their size, so a change of size here cannot
   put them half a handle away from the corner they mark. */
html.desktop.nle-on .nle-giz-h,
html.desktop.nle-on .nle-giz-rot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: var(--card); border: 1.5px solid var(--accent);
  box-shadow: 0 1px 4px var(--scrim-heavy);
}
html.desktop.nle-on .nle-giz-rot { border-radius: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }