/* nle — the timeline, and which cut is open.
   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 timeline ---------- */

html.desktop.nle-on #nle-timeline { background: var(--bg); }
html.desktop.nle-on .nle-tl-bar {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-bottom: 1px solid var(--border); background: var(--card);
}
html.desktop.nle-on .nle-tl-bar .sp { flex: 1; }
html.desktop.nle-on .nle-tl-title {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim);
}
/* ---------- WHICH CUT, AND THE WAY TO THE OTHERS ----------

   The bar used to open with the word TIMELINE, which is true of every one of
   them. It opens with the name now, and since the name comes out of a list,
   the name IS the list.

   It shrinks before anything else in the bar does: the buttons beside it are
   fixed-width controls that stop working when squeezed, and a tab is still a
   tab at half its length. Past that the names ellipsis rather than the row
   wrapping — the bar is one line and the timeline needs the height. */
html.desktop.nle-on .nle-tl-tabs {
  display: flex; align-items: center; gap: 3px;
  min-width: 0; flex: 0 1 auto; overflow: hidden;
}
html.desktop.nle-on .nle-tl-tab {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 190px; min-width: 0;
  padding: 4px 8px; border-radius: 3px 3px 0 0;
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--text-dim); font-family: inherit; font-size: 10.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
html.desktop.nle-on .nle-tl-tab:hover { color: var(--text); background: var(--surface-sunk); }
/* The current one is lit and sits on the panel rather than above it — the
   same relationship every tab strip draws, and the reason you can tell at a
   glance which of five names is the cut under your cursor. */
html.desktop.nle-on .nle-tl-tab.on {
  color: var(--accent); border-color: var(--border);
  background: var(--bg); cursor: default;
}
html.desktop.nle-on .nle-tl-tabname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
html.desktop.nle-on .nle-tl-tabx {
  flex: none; opacity: 0; font-size: 13px; line-height: 1;
  color: var(--text-faint); padding: 0 1px;
}
/* Shown on the tab you are pointing at, not on all of them: five crosses in a
   row is a row of ways to lose something, and only one of them is under your
   hand. */
html.desktop.nle-on .nle-tl-tab:hover .nle-tl-tabx,
html.desktop.nle-on .nle-tl-tab.on .nle-tl-tabx { opacity: .55; }
html.desktop.nle-on .nle-tl-tabx:hover { opacity: 1; color: var(--red, var(--danger)); }
html.desktop.nle-on .nle-tl-btn {
  padding: 4px 9px; border-radius: 3px; background: none; 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-tl-btn:hover { color: var(--accent); border-color: var(--accent); }
/* RENDER reads as the one button here that makes a file, so it carries the
   accent rather than sitting in the same grey as Undo. While it is running
   it holds a percentage and becomes the stop button, which is why the width
   is left to the text — a fixed one would make "Rendering 100%" clip. */
html.desktop.nle-on .nle-tl-btn.render { color: var(--accent); border-color: var(--accent-soft); }
html.desktop.nle-on .nle-tl-btn.render:hover { background: var(--accent-soft); }
html.desktop.nle-on .nle-tl-btn.render.busy {
  color: var(--card); background: var(--accent); border-color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Range -> node sits beside Render and is the same KIND of act, so it takes
   the same outline. Not the filled accent: Render is the one that makes the
   deliverable, and two buttons shouting equally is two buttons neither of
   which reads as the main one. Disabled while a render is running, because
   there is one renderer and one scratch folder. */
html.desktop.nle-on .nle-tl-btn.rangenode { border-color: var(--accent-soft); }
html.desktop.nle-on .nle-tl-btn.rangenode:hover { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-tl-btn.rangenode:disabled {
  opacity: .4; cursor: default; color: var(--text-faint); border-color: var(--border);
}

html.desktop.nle-on .nle-zoomwrap { display: flex; align-items: center; }
/* Scoped to the wrapper, never to `input[type=range]` at large — the panel
   has its own sliders and they are not this. */
html.desktop.nle-on .nle-zoomwrap input[type=range] {
  width: 120px; height: 3px; -webkit-appearance: none; appearance: none;
  background: var(--border-dash); border-radius: 2px; outline: none;
}
html.desktop.nle-on .nle-zoomwrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
}

html.desktop.nle-on .nle-tl-main { flex: 1; min-height: 0; display: flex; }
/* WIDE ENOUGH FOR THE THING IT HOLDS.

   Simon: "Let's increase the width of the bit in the viewer where you can
   access the scale, rotation, and position."

   96px had to carry a twirl, a keyframe diamond, the word "Position" and TWO
   numbers, which meant the label was ellipsed to "Posi…" on the one row that
   needs two values and the numbers had 30px each. Naming a property and
   showing what it is set to are the whole job of this column. */
html.desktop.nle-on .nle-tl-heads {
  flex: none; width: 172px; border-right: 1px solid var(--border); background: var(--card);
  overflow: hidden;
}
html.desktop.nle-on .nle-ruler-spacer { height: 22px; border-bottom: 1px solid var(--border); }
/* POSITIONED, so the seam grip inside it has something to be absolute
   AGAINST. Without this the grip resolved against #layout instead — the
   nearest positioned ancestor — so every handle in the header column was
   drawn hundreds of pixels from the row it belonged to, and dragging the line
   beside the track names did nothing at all. The timeline side worked only
   because .nle-track happens to be `position: relative` already. */
/* THE ROW IS THE TRACK AND ITS LANES; THE BAR IS THE TRACK.

   Everything that belongs to the clip lane — the name, the eye, the delete,
   the resize seam — lives in the bar, so it stays lined up with the lane when
   the effect controls open four rows underneath it. See fxBuildRows() in
   js/nleedit.js for what goes below. */
html.desktop.nle-on .nle-head-row {
  position: relative;
  height: 62px; border-bottom: 1px solid var(--border);
}
html.desktop.nle-on .nle-head-bar {
  position: relative;
  height: 62px; display: flex; align-items: center; gap: 4px; padding: 0 7px;
}
html.desktop.nle-on .nle-head-name {
  flex: 1; font-size: 10.5px; font-weight: 800; color: var(--text-dim); letter-spacing: .4px;
}
html.desktop.nle-on .nle-head-b {
  width: 18px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--text-faint); cursor: pointer; font-size: 11px; line-height: 1;
}
html.desktop.nle-on .nle-head-bar:hover .nle-head-b { border-color: var(--border); }
html.desktop.nle-on .nle-head-b:hover { color: var(--text); background: var(--surface-sunk); }
html.desktop.nle-on .nle-head-b.off { color: var(--accent); }
html.desktop.nle-on .nle-head-b.del:hover { color: #fff; background: var(--red, var(--danger)); }

html.desktop.nle-on .nle-tl-scroll { flex: 1; min-width: 0; overflow: auto; position: relative; }
html.desktop.nle-on .nle-tl-inner { position: relative; min-height: 100%; }
html.desktop.nle-on .nle-ruler {
  position: sticky; top: 0; z-index: 4; height: 22px;
  background: var(--card); border-bottom: 1px solid var(--border);
}
html.desktop.nle-on .nle-tick {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-dash);
}
html.desktop.nle-on .nle-tick.minor { top: 13px; background: var(--border); }
html.desktop.nle-on .nle-tick span {
  position: absolute; left: 4px; top: 4px; font-size: 9px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ---- THE IN/OUT RANGE, ON THE RULER ----

   Simon: "We also need to be able to create in and out points in the
   timeline."

   Drawn as two dimmed shoulders rather than one highlighted band, because the
   thing being said is "not this part" — a band lit up over the middle reads as
   a selection you have to dismiss, and shoulders read as the ends being out of
   play, which is what an in and an out mean. The band itself is a hairline
   under the ticks, just enough to say the two handles belong to each other.

   None of it exists in the markup until a point has been set (see hasRange in
   nleedit.js), so a cut with no range cannot look like one whose range happens
   to be everything. */
html.desktop.nle-on .nle-rg-dim {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  background: rgba(8, 8, 10, .58); pointer-events: none;
}
html.desktop.nle-on .nle-rg-band {
  position: absolute; left: 0; bottom: 0; height: 2px; z-index: 2;
  background: var(--accent); opacity: .75; pointer-events: none;
}
/* WIDE ENOUGH TO GRAB, drawn narrow. An 11px hit area on a 3px mark: the
   handle you are aiming at is the line, and the handle you have to hit is
   whatever a hand can land on. Same bargain the track-resize seam makes. */
html.desktop.nle-on .nle-rg-h {
  position: absolute; top: 0; bottom: 0; width: 11px; margin-left: -5.5px;
  z-index: 5; cursor: ew-resize;
  display: flex; align-items: stretch; justify-content: center;
}
html.desktop.nle-on .nle-rg-h::after {
  content: ""; width: 3px; border-radius: 2px; background: var(--accent);
  opacity: .9;
}
html.desktop.nle-on .nle-rg-h:hover::after { opacity: 1; width: 4px; }
/* The two ends lean outward, so which one you are holding is legible without
   reading a tooltip. */
html.desktop.nle-on .nle-rg-h.in { border-left: 2px solid var(--accent); }
html.desktop.nle-on .nle-rg-h.out { border-right: 2px solid var(--accent); }

html.desktop.nle-on .nle-tracks { position: relative; }
html.desktop.nle-on .nle-track {
  position: relative; height: 62px; border-bottom: 1px solid var(--border);
  /* Alternating bands, so a clip reads as sitting ON a track rather than
     floating in the dark, and so you can count rows without reading labels. */
  background-color: var(--surface-deep);
}
html.desktop.nle-on .nle-track:nth-child(even) { background-color: #0d0d0f; }
html.desktop.nle-on .nle-track.over { background-color: rgba(var(--accent-rgb), .10); box-shadow: inset 0 0 0 1px var(--accent); }

/* THE SEAM BETWEEN TWO TRACKS, which is also the handle that resizes the one
   above it. Six pixels, over the boundary, above the clips — a clip's own drag
   starts on pointerdown too, so this has to win by being on top rather than by
   any ordering rule. It only shows itself on hover, because a permanent line
   across every track would read as furniture. */
/* ---- THE EFFECT CONTROLS, UNDER THE TRACK ---------------------------- */

/* Simon: "you click an arrow to untwirl everything there, then it just
   depends which clip you select in that track." The arrow. */
html.desktop.nle-on .nle-fxtw {
  flex: none; width: 14px; height: 14px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 3px;
  color: var(--text-faint); font-size: 9px; cursor: pointer;
}
html.desktop.nle-on .nle-fxtw:hover { color: var(--text); background: var(--surface-sunk); }
html.desktop.nle-on .nle-fxtw.on { color: var(--accent); }

html.desktop.nle-on .nle-fxrows { padding: 0 7px 0 9px; }
html.desktop.nle-on .nle-fxrow {
  display: flex; align-items: center; gap: 5px;
}
html.desktop.nle-on .nle-fxlab {
  flex: 1; min-width: 0; font-size: 9.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The number is the control — there is no room for a slider in this column,
   and a column of sliders is the panel this replaced. It is DRAGGED as well
   as typed (see typeNumberInPlace), so the cursor says the scrub: ew-resize
   is what every scrubbable number wears, and `text` would have promised the
   lesser of the two gestures. */
html.desktop.nle-on .nle-fxv {
  flex: none; min-width: 38px; text-align: right; cursor: ew-resize; padding: 0 3px;
  font-size: 9.5px; color: var(--text); font-variant-numeric: tabular-nums;
  border-radius: 3px; user-select: none;
}
html.desktop.nle-on .nle-fxv:hover { background: var(--surface-sunk); }
/* A MASK'S OWN ROW. Its name is the label and its number is the feather —
   see fxPropsFor in js/nleedit.js. The × is the same weight as the keyframe
   diamond it stands in place of, so the column does not shift when a mask is
   added. */
html.desktop.nle-on .nle-fxmask { padding-left: 15px; font-style: italic; }
html.desktop.nle-on .nle-fxmx {
  flex: none; width: 13px; height: 13px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 3px;
  color: var(--text-faint); font-size: 11px; cursor: pointer;
}
html.desktop.nle-on .nle-fxmx:hover { color: #fff; background: var(--danger, #b4413c); }
/* THE MASK CONTROL ON THE TIMELINE'S BAR. Hidden entirely with nothing
   selected rather than greyed: a mask is drawn ON a clip, so with no clip
   there is not a disabled version of this gesture, there is no gesture. */
html.desktop.nle-on .nle-maskwrap { position: relative; flex: none; }
html.desktop.nle-on .nle-maskwrap.hidden { display: none; }
html.desktop.nle-on .nle-maskbtn { display: flex; align-items: center; justify-content: center; }
html.desktop.nle-on .nle-maskbtn.on { color: #fff; background: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-maskpop {
  position: absolute; right: 0; bottom: calc(100% + 5px); z-index: 40;
  display: flex; flex-direction: column; min-width: 104px; padding: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 8px 26px var(--scrim-heavy);
}
html.desktop.nle-on .nle-maskpop.hidden { display: none; }
html.desktop.nle-on .nle-maskpop button {
  background: none; border: 0; border-radius: 3px; padding: 5px 9px;
  text-align: left; color: var(--text); font: inherit; font-size: 11px; cursor: pointer;
}
html.desktop.nle-on .nle-maskpop button:hover { background: var(--surface-sunk); color: var(--accent); }
html.desktop.nle-on .nle-fxv.scrubbing {
  background: var(--surface-sunk); color: var(--accent);
}
/* While typing it really is text, and the caret has to be allowed in. */
html.desktop.nle-on .nle-fxv.editing { cursor: text; user-select: text; }
html.desktop.nle-on .nle-fxv.editing {
  outline: 1px solid var(--accent); outline-offset: 1px; background: var(--surface-sunk);
}
/* Hollow until the property is keyframed, filled once it is — the same
   language the Inspector's own diamond used, kept so the two never mean
   different things. */
html.desktop.nle-on .nle-fxkf {
  flex: none; width: 13px; height: 13px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 3px;
  color: var(--text-faint); font-size: 9px; cursor: pointer;
}
html.desktop.nle-on .nle-fxkf:hover { color: var(--text); background: var(--surface-sunk); }
html.desktop.nle-on .nle-fxkf.on { color: var(--accent); }
/* Nothing selected on this track: the rows say so rather than showing the
   last clip's numbers, which would be four fields quietly describing
   something nobody is pointing at. */
html.desktop.nle-on .nle-fxhint {
  display: flex; align-items: center; font-size: 9.5px; color: var(--text-faint);
  padding-left: 4px;
}

/* The lanes, in the timeline column. Positioned from the top of the row by
   the track's own height, so they start exactly where the clip lane ends. */
html.desktop.nle-on .nle-fxlanes {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
}
html.desktop.nle-on .nle-fxlane {
  position: relative; border-top: 1px solid var(--border-dash, rgba(255,255,255,.06));
}
html.desktop.nle-on .nle-fxk {
  position: absolute; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -3.5px;
  background: var(--accent); transform: rotate(45deg); border-radius: 1px;
  /* Retimed by dragging, so the cursor says the drag rather than the click —
     see kfPress in js/nleedit.js. */
  cursor: ew-resize; pointer-events: auto;
}
html.desktop.nle-on .nle-fxk:hover { background: #fff; }
/* SELECTED, which is a state this diamond did not have until it became
   something you can hold. White with a ring: it has to read at 7px against
   an accent-coloured sibling two frames away, and a colour change alone does
   not at that size. */
html.desktop.nle-on .nle-fxk.sel {
  background: #fff; box-shadow: 0 0 0 2px var(--accent);
}

html.desktop.nle-on .nle-trk-grip {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; z-index: 6;
  cursor: row-resize; background: transparent;
}
html.desktop.nle-on .nle-trk-grip:hover { background: var(--accent); opacity: .55; }
/* While one is being dragged the cursor is the resize cursor everywhere, and
   nothing else may claim a hover — the pointer regularly leaves the 6px strip
   during the drag and the row underneath should not light up as a drop target
   because of it. */
html.desktop.nle-on.nle-rowsizing,
html.desktop.nle-on.nle-rowsizing * { cursor: row-resize !important; }
html.desktop.nle-on.nle-rowsizing .nle-track.over { background-color: var(--surface-deep); box-shadow: none; }

/* Height comes from the track now, not from a number here — the two used to
   have to agree and one of them was in JavaScript. */
/* HEIGHT, NOT top+bottom. A row with its effect controls open is four rows
   taller than its clip lane, and a clip stretched to the row would be drawn
   straight over its own keyframes. --clip-h is written per row by
   renderTimeline(); the fallback is the old behaviour for any row that has
   not been given one. */
html.desktop.nle-on .nle-clip {
  position: absolute; top: 4px; height: var(--clip-h, calc(100% - 8px)); overflow: hidden;
  background: #24242a; border: 1px solid #3a3a44; border-radius: 3px;
  cursor: grab; user-select: none;
}
html.desktop.nle-on .nle-clip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
html.desktop.nle-on .nle-clip.missing { border-style: dashed; border-color: var(--red, var(--danger)); }
/* FULL BRIGHTNESS. The thumbnail was at 55% under a gradient dark enough to
   read a name against, which between them meant a timeline of grey rectangles
   you could not tell apart at a glance — and telling them apart at a glance is
   the only reason there is a picture on a clip at all.

   The picture is now itself. The gradient stays, because the name and the
   duration have to stay readable over a bright frame, but it is pulled to the
   two strips they actually sit in — the top and the bottom — instead of
   washing over the middle of the frame. */
html.desktop.nle-on .nle-clip-thumb {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1;
}
html.desktop.nle-on .nle-clip-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, 0) 34%),
    linear-gradient(0deg,   rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, 0) 34%);
}
html.desktop.nle-on .nle-clip-name {
  position: absolute; left: 7px; right: 7px; top: 5px;
  font-size: 10px; font-weight: 700; color: #f0f0f4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none;
}
html.desktop.nle-on .nle-clip-dur {
  position: absolute; left: 7px; bottom: 4px;
  font-size: 9px; color: #b9b9c2; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none;
}
/* A GRABBED FRAME, MARKED WHERE IT CAME FROM.

   A full-height hairline rather than a dot, because the thing being marked
   is a moment — a position along the clip — and a dot at some arbitrary
   height reads as a thing sitting on the clip instead of a place in it. The
   number rides at the top where the name is not.

   z-index 1: over the thumbnail and the gradient, under the trim edges (2)
   and the hover verbs, so it can never be the thing you grab by accident.
   pointer-events off for the same reason — a mark is a note, not a control.

   Amber rather than the accent: the accent is selection and the playhead,
   and a mark that looks like the playhead is a mark you will try to drag. */
html.desktop.nle-on .nle-clip-mark {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 1;
  margin-left: -0.5px; pointer-events: none;
  background: rgba(255, 191, 90, .85);
  box-shadow: 0 0 3px rgba(0, 0, 0, .8);
}
html.desktop.nle-on .nle-clip-mark span {
  position: absolute; top: 1px; left: 2px;
  font-size: 7.5px; font-weight: 700; line-height: 1.2;
  color: #0b0b0c; background: rgba(255, 191, 90, .92);
  border-radius: 2px; padding: 0 2px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* No narrow-clip rule. There was one, keyed off an inline width and a
   `.narrow` class that does not exist — a selector that could never match,
   which is worse than no rule because it reads as handled. The clip is
   overflow:hidden, so a number past the right edge is simply cut off, and
   the full reading is on the hover title either way. */

/* 9px of grab for the trim, matching EDGE in the JS. Both numbers exist and
   they have to agree: a wider stripe than the hit test is a handle that lights
   up and then moves the clip instead. */
html.desktop.nle-on .nle-clip-edge {
  position: absolute; top: 0; bottom: 0; width: 9px; z-index: 2;
}
html.desktop.nle-on .nle-clip-edge.l { left: 0; }
html.desktop.nle-on .nle-clip-edge.r { right: 0; }
html.desktop.nle-on.nle-tool-select .nle-clip-edge { cursor: ew-resize; }
html.desktop.nle-on.nle-tool-select .nle-clip-edge:hover { background: rgba(var(--accent-rgb), .5); }
html.desktop.nle-on.nle-tool-blade .nle-clip { cursor: crosshair; }
html.desktop.nle-on.nle-tool-slip .nle-clip,
html.desktop.nle-on.nle-tool-slide .nle-clip { cursor: ew-resize; }
/* Scoped to the timeline, not to `*` with !important the way the original had
   it — a grabbing cursor over the whole application including the text you
   were about to select is not a nicety. */
html.desktop.nle-on.nle-grabbing .nle-tl-scroll,
html.desktop.nle-on.nle-grabbing .nle-clip { cursor: grabbing; }

html.desktop.nle-on .nle-phline {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent);
  z-index: 6; pointer-events: none;
}
html.desktop.nle-on .nle-phline::before {
  content: ''; position: absolute; top: 0; left: -5px;
  border-left: 5.5px solid transparent; border-right: 5.5px solid transparent;
  border-top: 8px solid var(--accent);
}

/* ---------- sequence settings (moved here from under the viewer) ----------
   Simon: "move it so the section that shows us the resolution, frame rate,
   etc... is over next to the timeline title in the left-hand corner," with
   "a little edit icon next to that information there so when you click edit,
   it shows you the settings." #nle-meta is a plain line now, not a button —
   #nle-metabtn (the pencil) is the actual control, and looks like nothing
   until you go near it, same as the old whole-line button did. */
html.desktop.nle-on .nle-tlmeta-wrap { position: relative; display: flex; align-items: center; gap: 2px; }
html.desktop.nle-on .nle-tlmeta { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
html.desktop.nle-on .nle-metabtn {
  appearance: none; background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--text-faint); padding: 3px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
html.desktop.nle-on .nle-metabtn:hover { border-color: var(--border); color: var(--text-dim); }
/* Half res is the one setting here that makes the picture worse on purpose,
   so it is coloured rather than left to blend in with the frame size. */
html.desktop.nle-on #nle-meta.pv-low { color: var(--accent); }
/* Anchored to .nle-tlmeta-wrap, not to the bar itself — the wrap sits right
   after the tabs at the left edge, so opening downward from there keeps the
   popover under the pencil regardless of how many buttons are stacked to the
   right of it in the bar. It used to open upward, anchored to the strip's own
   right edge; there is no "upward" to open into here, the timeline panel is
   below this bar, not above it. */
html.desktop.nle-on .nle-setpop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: var(--z-sticky);
  width: 260px; padding: 9px 10px 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 10px 28px var(--scrim-light);
  display: flex; flex-direction: column; gap: 7px;
}
html.desktop.nle-on .nle-setpop.hidden { display: none; }
html.desktop.nle-on .nle-setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
html.desktop.nle-on .nle-setrow.hidden { display: none; }
html.desktop.nle-on .nle-setrow label { font-size: 10.5px; color: var(--text-faint); }
html.desktop.nle-on .nle-setrow select,
html.desktop.nle-on .nle-setrow input {
  flex: 0 0 138px; background-color: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 5px; font-size: 11px; font-family: inherit;
}
html.desktop.nle-on .nle-setwh { flex: 0 0 138px; display: flex; align-items: center; gap: 4px; }
html.desktop.nle-on .nle-setwh input { flex: 1 1 auto; min-width: 0; }
html.desktop.nle-on .nle-setwh b { color: var(--text-faint); font-size: 10px; }
html.desktop.nle-on .nle-sethint {
  font-size: 9.5px; line-height: 1.35; color: var(--text-faint); margin: -3px 0 2px;
}

/* ---------- the "add a track" placeholder row ----------
   Simon moved this twice. First: a full-width bar under the whole heads/
   tracks split, styled like a track that doesn't exist yet. Then: "on the
   left-hand side, where you have the visibility toggle, there should just
   be another line item underneath the current tracks" — so it lives in
   #nle-heads now, appended after the real .nle-head-row rows (see
   renderHeads() in nleedit.js), not spanning the clip lanes at all. Same
   visual language as before — a dashed seam and faded text until you're
   actually pointing at it — just scoped to the column it was asked to sit
   in, and full-width WITHIN that column rather than across the whole
   timeline. */
html.desktop.nle-on .nle-head-addrow {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 7px 4px; margin: 0; box-sizing: border-box;
  background: none; border: none; border-top: 1px dashed var(--border);
  color: var(--text-faint); font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .2px; cursor: pointer;
  /* The heads column is 96px wide, the narrowest home this label has had —
     one line, clipped rather than wrapped, so a squeeze reads as truncation
     and not as the row suddenly growing taller than its neighbours. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.desktop.nle-on .nle-head-addrow:hover {
  color: var(--accent); border-top-color: var(--accent); background: var(--surface-sunk);
}