/* nle — the ghost, browser zoom and the add button.
   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 ghost: what the click would produce ----------

   Empty track space is clickable and nothing about a dark rectangle says so,
   so it shows the shot it would make, under the cursor, before the click.
   Quieter than a real shot in every way — dashed, half-lit, no fill — because
   it is an offer and not a thing. Drawn at the size and position the shot will
   actually take, bump included. */

html.desktop.nle-on .nle-ghost {
  position: absolute; height: 54px; z-index: 5;
  border: 1px dashed var(--border-dash); border-radius: 3px;
  background: rgba(255, 255, 255, .03);
  display: flex; align-items: center; justify-content: center;
  opacity: .75;
}
/* Dropping ON something rather than beside it. Solid rather than dashed,
   because the outcome is definite: that clip's picture is about to change,
   and a dashed outline in the same place would read as "insert here". */
html.desktop.nle-on .nle-ghost.replace {
  border-style: solid; border-color: var(--accent);
  background: rgba(var(--accent-rgb), .16); opacity: .95; z-index: 7;
}
html.desktop.nle-on .nle-ghost.replace .nle-ghost-lab { color: #fff; }
html.desktop.nle-on .nle-ghost.hidden { display: none; }
html.desktop.nle-on .nle-ghost-lab {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 6px;
}
/* Warmer the moment the pointer is over the track it belongs to — the track
   itself already lights on hover, and the two together read as one target
   rather than as a rectangle floating near one. */
html.desktop.nle-on .nle-track:hover ~ .nle-ghost,
html.desktop.nle-on .nle-tracks:hover .nle-ghost {
  border-color: var(--accent); background: rgba(var(--accent-rgb), .07);
}
html.desktop.nle-on .nle-tracks:hover .nle-ghost .nle-ghost-lab { color: var(--accent); }

/* ---------- the browser's zoom, and the add button at its foot ----------

   One number drives both grids, so timelines and media stay the same size as
   each other — they are the same kind of thing in this pane, and a zoom that
   moved one and not the other would say otherwise. */

/* A CARD IS NEVER WIDER THAN THE COLUMN IT IS IN.

   `minmax(88px, 1fr)` reads as "at least 88, share the rest" and behaves that
   way right up to the point it matters: in a pane narrower than 88px the track
   is still 88px, and a grid track wider than its container does not shrink —
   it overflows. Drag the project panel narrow with the card size turned up and
   the browser's cards march straight out of the panel and sit on top of the
   column beside it, which from the outside is "the panels overlap".

   `min(size, 100%)` is the floor that cannot exceed the container: the cards
   are the size you asked for while there is room for it, and exactly one
   column wide when there is not. */
html.desktop.nle-on .nle-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--nle-card, 88px), 100%), 1fr));
}
html.desktop.nle-on .nle-cards.tight {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--nle-card, 88px) - 10px), 100%), 1fr));
}
html.desktop.nle-on .nle-head .nle-zoomwrap input[type=range] { width: 84px; }

/* The foot. A "new" action belongs under the list it adds to, and an icon is
   enough once it is the only thing down there. */
html.desktop.nle-on .nle-binfoot {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-top: 1px solid var(--border); background: var(--card);
}
html.desktop.nle-on .nle-binadd {
  width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 3px;
  background: none; border: 1px dashed var(--border-dash); color: var(--text-faint);
  cursor: pointer;
}
html.desktop.nle-on .nle-binadd:hover {
  border-style: solid; border-color: var(--accent); color: var(--accent);
}
/* Dragging a clip over it, not just pointing at it — same treatment as
   hover (this is what the button offers to do with what's on the pointer),
   plus a filled background so it reads as a live target rather than a
   coincidence of the cursor passing over. */
html.desktop.nle-on .nle-binadd.drop {
  border-style: solid; border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}