/* nle — the project browser: timelines and media in one pane.
   One section of the old nle.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- tabs, where a region holds more than one thing ---------- */

.nle-tabs { flex: none; display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.nle-tab {
  /* min-width: 0 because there are three of these now and "GENERATIONS" is a
     long word — without it flex refuses to shrink below the text and the
     strip overflows the column instead of the labels ellipsing. */
  flex: 1; min-width: 0; padding: 7px 3px 6px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-faint);
  border-bottom: 2px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nle-tab:hover { color: var(--text-dim); }
.nle-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.nle-pane { display: none; flex: 1; min-height: 0; overflow: auto; }
.nle-pane.on { display: flex; flex-direction: column; }

/* ---------- the project browser: timelines and media in one pane ----------

   They were two tabs. Two tabs meant the two things you assemble a cut from
   were never on screen together, and picking a sequence cost a tab switch you
   had to remember to undo. One scrolling pane with two headed groups, in the
   order you reach for them.

   A TIMELINE IS A CARD IN THE SAME GRID, AT THE SAME SIZE, as the media beside
   it — which is what the two of them are to the person using this. It carries
   a film-strip mark rather than a thumbnail: a sequence has no single frame
   that stands for it, and picking one would be a lie that changes every time
   you edit. */

html.desktop.nle-on .nle-browser {
  flex: 1; min-height: 0; overflow: auto; padding: 0 0 10px;
}
html.desktop.nle-on #nle-bin.over { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- the project column, folded away ----------

   Folded, the column keeps a sliver so the way back is where the panel was —
   a button somewhere else would be a second thing to learn. Everything inside
   it goes, including the tabs, because 26px of tab strip is not a tab strip.
   The arrow stays, centred, and reads as the edge of a drawer. */
html.desktop.nle-on .nle-binfold {
  flex: none; appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 11px; line-height: 1; padding: 2px 4px;
}
html.desktop.nle-on .nle-binfold:hover { color: var(--accent); }
/* SWITCHED OFF MEANS GONE. It used to fold to a 26px strip holding its own
   unfold arrow, because that arrow was the only way back. The switch is in
   the app header now, so the column can leave entirely and give its width to
   the timeline — which is the whole reason for turning it off. */
/* SWITCHED OFF MEANS NO WIDTH — but the column is still THERE, because the
   seam that brings it back is positioned off its box and a box with
   display:none has no box. Zero wide with its contents hidden: nothing shows,
   nothing is reachable, and the arrow on the seam still knows where to sit. */
html.nle-binfolded.desktop.nle-on #nle-bin > * { display: none; }
html.nle-binfolded.desktop.nle-on #nle-bin .nle-head > *:not(.nle-binfold) { display: none; }
html.nle-binfolded.desktop.nle-on #nle-bin .nle-head {
  border-bottom: none; justify-content: center; padding: 6px 0;
}
html.nle-binfolded.desktop.nle-on #nle-bin { overflow: hidden; }

/* ---------- NOTHING IN THE BROWSER LEAVES ITS 16:9 BOX ----------

   The thumbnail already declared aspect-ratio, but anything dropped INSIDE a
   card — an <img> or a <video> the browser builds for a preview — had no size
   of its own and stretched the tile to whatever shape the file was. A grid of
   cards that are each a different height is a grid you cannot scan, which is
   the only thing a grid is for.

   cover rather than contain: these are 78px wide and a letterboxed portrait in
   a box that size is a grey rectangle with a stripe in it. */
/* TWO THINGS WERE STILL GETTING PAST THIS.

   The first pass used the CHILD combinator, so it only caught media sitting
   directly inside a card or its thumbnail. A preview built one div deeper —
   which is how several of them are built — matched nothing and went back to
   stretching the tile. Descendant now: anywhere inside a card, at any depth.

   The second is the one that actually mattered, and it is why the box grew
   even where the rule DID match. `aspect-ratio` sets a box's shape only while
   nothing inside insists otherwise; a child taller than the ratio pushes the
   box open and the ratio quietly loses. `overflow: hidden` on the thumbnail is
   what makes the ratio binding rather than advisory. It is not tidiness, it is
   the rule.

   cover rather than contain: these are 78px wide, and a letterboxed portrait
   in a box that size is a grey rectangle with a stripe in it. */
html.desktop.nle-on .nle-card-th {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
html.desktop.nle-on .nle-card img,
html.desktop.nle-on .nle-card video,
html.desktop.nle-on .nle-card canvas {
  display: block; width: 100%; height: 100%; max-height: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
}
/* And the card, for anything that lands outside the thumbnail altogether. */
html.desktop.nle-on .nle-card { overflow: hidden; }
html.desktop.nle-on .nle-fsdir .nle-card-th { aspect-ratio: 16 / 9; }
html.desktop.nle-on .nle-grp {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 9px 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-faint);
}
html.desktop.nle-on .nle-grp-hint {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-faint); opacity: .75;
}
/* Timelines pack tighter than footage: the mark is the same at any size and
   the name is the only thing being read. */
html.desktop.nle-on .nle-cards.tight {
  flex: none; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); padding-top: 0;
}

html.desktop.nle-on .nle-card.tl { position: relative; cursor: pointer; }
html.desktop.nle-on .nle-card-th.mark {
  display: flex; align-items: center; justify-content: center;
  background: #121216; color: var(--text-faint);
}
html.desktop.nle-on .nle-card.tl:hover .nle-card-th.mark { color: var(--text-dim); }
/* THE ONE THAT IS OPEN. The cut at the bottom of the window is this one, and
   nothing else on screen says which — so the card has to. */
html.desktop.nle-on .nle-card.tl.on { border-color: var(--accent); }
html.desktop.nle-on .nle-card.tl.on .nle-card-th.mark { color: var(--accent); background: rgba(var(--accent-rgb), .10); }
html.desktop.nle-on .nle-card.tl.on .nle-card-name { color: var(--accent); font-weight: 700; }
/* Selected but not opened — a single click, on the way to a rename or a drag. */
html.desktop.nle-on .nle-card.tl.pick { box-shadow: 0 0 0 1px var(--border-dash); }
html.desktop.nle-on .nle-card.tl.drop { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
html.desktop.nle-on .nle-card.tl:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Rename and delete, on the card, on hover. Permanent buttons on every card
   would be a grid of controls rather than a grid of timelines. */
/* FADED, NOT `display: none`. Hiding them outright makes them unreachable to
   anything that is not a mouse — including the keyboard, and including a test,
   which cannot hover an element it is not allowed to see. Opacity keeps the
   button in the layout and in the accessibility tree while keeping the grid a
   grid of timelines rather than a grid of controls. */
html.desktop.nle-on .nle-card-b {
  position: absolute; top: 3px; width: 17px; height: 17px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 12, .8); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text-dim); cursor: pointer;
  font-size: 11px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
html.desktop.nle-on .nle-card-b { right: 23px; }
html.desktop.nle-on .nle-card-b.del { right: 3px; }
html.desktop.nle-on .nle-card.tl:hover .nle-card-b,
html.desktop.nle-on .nle-card.tl.on .nle-card-b,
html.desktop.nle-on .nle-card.tl:focus-within .nle-card-b { opacity: 1; }
html.desktop.nle-on .nle-card-b:hover { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-card-b.del:hover { color: #fff; background: var(--red, var(--danger)); border-color: var(--red, var(--danger)); }

/* A NAME YOU CAN CLICK IS A NAME THAT SAYS SO.

   One click on the words starts the rename now, and a piece of text that
   does something on click and looks exactly like a piece of text that does
   not is a trap you fall into once and then distrust for ever. A text cursor
   and a lift on hover is the whole signal — no button, no underline sitting
   there all the time. */
html.desktop.nle-on .nle-card-name.ren { cursor: text; }
html.desktop.nle-on .nle-card-name.ren:hover {
  color: var(--text); background: rgba(255, 255, 255, .06); border-radius: 3px;
}
/* Renaming in place. The name is a card label until you ask, then it is a
   field — no dialog to change one word. */
html.desktop.nle-on .nle-card-name[contenteditable="true"] {
  outline: none; border-bottom: 1px solid var(--accent); cursor: text;
  -webkit-user-select: text; user-select: text; color: var(--text);
}