/* nle — the viewer's second source, and what is worked from.
   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's second source ----------

   One screen, two sources: the cut while you are cutting, the graph's output
   while you are in the graph. Drawn as an overlay inside the same stage rather
   than as a second panel, so the picture is the same size and in the same
   place either way and your eye does not move when the source does. */

html.desktop.nle-on .nle-nodeview {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: #08080a; padding: 10px;
}
html.desktop.nle-on .nle-nodeview.hidden { display: none; }
html.desktop.nle-on .nle-nv-media {
  max-width: 100%; max-height: 100%;
  box-shadow: 0 6px 30px var(--scrim-heavy); background: #000;
}
/* THE FULL/PROXY BUTTON AND ITS `.fullres` CLASS ARE BOTH GONE.

   The button decided which copy an IMAGE opened and nothing at all for a
   clip, which is why Simon asked for it: "it doesn't ever load the full res."
   The class outlived its own job earlier than that - it used to drop the fit
   (max-width:none, host becomes a scroller) so FULL and PROXY were two
   different display models and switching jumped; once they were aligned the
   class was left carrying `image-rendering: auto`, which is the initial value.

   The viewer opened the file for a while after that, with one display model,
   one copy and nothing in the corner to press.

   THERE IS SOMETHING IN THE CORNER AGAIN, and it is a different control.
   Simon, later: "We need to add the option in the viewer to switch from proxy
   to full res again, as at the moment everything we view in the viewer is in
   the full resolution." Full res by default was right and stays; what was
   missing is the way back down for a 4K clip. The new one is `.nle-nv-res` at
   the foot of this file: one flag, one source decision, video first -- and it
   reports what is ON SCREEN rather than what was asked for, which is the
   thing the old one could not do. It does NOT touch the display model: there
   is still one fit, and switching copies does not jump the picture. */
html.desktop.nle-on .nle-nv-empty {
  color: var(--text-faint); font-size: 11px; text-align: center;
  border: 1px dashed var(--border-dash); border-radius: 3px; padding: 14px 18px;
}
/* Which node this is, quietly, in the corner — the viewer is shared and
   "whose picture is this" has to be answerable without looking away. */
/* Bottom-left, the same corner and the same facts the gallery puts under a
   tile: size, length, model, time, cost. It was the node's title alone, which
   meant the bigger you looked at something the less you were told about it.

   A row of chips rather than one pill, because the facts arrive at different
   moments — the size only once the file is decoded — and a single string
   would have to be rebuilt each time one of them landed. */
html.desktop.nle-on .nle-nv-tag {
  position: absolute; left: 12px; bottom: 10px; z-index: 3;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(10, 10, 12, .78); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 11px;
  font-size: 9.5px; font-weight: 700; color: var(--text-dim);
  max-width: calc(100% - 24px); pointer-events: none;
}
html.desktop.nle-on .nle-nv-tag b {
  color: var(--text); font-weight: 800;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.desktop.nle-on .nle-nv-tag span:empty { display: none; }
html.desktop.nle-on .nle-nv-tag .nv-dim { font-variant-numeric: tabular-nums; }
html.desktop.nle-on .nle-nv-tag .nv-m { color: var(--text-dim); }
html.desktop.nle-on .nle-nv-tag .nv-c { color: var(--text-dim); font-variant-numeric: tabular-nums; }
html.desktop.nle-on .nle-nv-tag .nv-n { color: var(--accent); font-weight: 800; }

/* THE RES SWITCH ON THE CAPTION STRIP.

   Simon: "We need to add the option in the viewer to switch from proxy to
   full res again, as at the moment everything we view in the viewer is in the
   full resolution." The note at the top of this file explains why the LAST
   one was taken out; the short version is that it decided nothing over a
   clip. This one does, and it reads as a state rather than as a button you
   press: dim when it is showing the file (nothing to report) and lit when it
   is showing a proxy (the picture is worse than the file on purpose, which is
   the one thing here worth saying out loud -- the same rule the half-res
   preview label follows on the meta line).

   `.none` is "proxy is on, this file has none": the label reads Full res,
   because that is what is on screen, and the dotted underline is the tell
   that the setting is on and doing nothing here. */
html.desktop.nle-on .nle-nv-tag .nle-nv-res {
  margin-left: 2px; padding: 0 6px; height: 16px; line-height: 14px;
  border: 1px solid var(--border, #1b1b1e); border-radius: 3px;
  background: transparent; color: var(--text-faint, #66666e);
  font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
html.desktop.nle-on .nle-nv-tag .nle-nv-res:hover {
  border-color: var(--accent, #E50A4E); color: var(--text, #e9e9ec);
}
html.desktop.nle-on .nle-nv-tag .nle-nv-res.on {
  border-color: var(--accent, #E50A4E); background: var(--accent, #E50A4E); color: #fff;
}
html.desktop.nle-on .nle-nv-tag .nle-nv-res.on.none {
  background: transparent; color: var(--text-dim, #9a9aa2);
  border-style: dashed;
}
/* The ring is the gallery's and the node's, unchanged — a third place wearing
   one design rather than a third design. Sized up here because this is the
   big screen and a 44px ring on a 1000px viewer reads as a spinner rather
   than as progress. */
html.desktop.nle-on .nle-nv-busy {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
html.desktop.nle-on .nle-nv-busy .pend-center { width: 120px; height: 120px; }
html.desktop.nle-on .nle-nv-busy .pend-state {
  font-size: 11px; color: var(--text-dim); letter-spacing: .3px;
}

/* ---------- WHAT IS BEING WORKED FROM, BEHIND THE RING ----------

   The gallery's pending card and the node's own card both put the ring over
   the picture the job is being made from. The viewer drew the ring alone, so
   the same job looked like two different things depending on where you were
   looking at it — and the one at full size was the one that told you least.

   Three layers, in the order the eye reads them: the bleed, which is the same
   picture blown up and blurred so the frame is never two black bars beside a
   portrait; the picture itself, contained, at its own shape; and the ring
   over both, on a wash dark enough to read against anything.

   `nle-nv-bleed` is a background-image rather than an <img> because it is
   scenery — it must not be dragged, selected or measured, and a background
   cannot be any of those. */
html.desktop.nle-on .nle-nv-bleed {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.15) brightness(.55);
  transform: scale(1.12);          /* hides the blur's soft edge at the frame */
  pointer-events: none;
}
html.desktop.nle-on .nle-nv-under {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; pointer-events: none;
  -webkit-user-drag: none; user-select: none;
}
/* Over the picture rather than beside it, and covering the whole frame so the
   percentage is dead centre of the viewer — not centre of the picture, which
   moves as the source changes shape. */
html.desktop.nle-on .nle-nv-busy.over {
  position: absolute; inset: 0; z-index: 2;
  justify-content: center;
  background: rgba(8, 8, 10, .5);
  backdrop-filter: blur(1.5px);
}