/* nle — the generation panel's tab bar, and what 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 generation panel's tab bar ----------

   `#tabs` is `position: sticky; top: var(--hdr-h)` — pinned just below a
   header that was `position: fixed` over the panel. Under the shell the header
   is a grid row of its own and #app is a column that scrolls on its own, so
   that offset became 50px of nothing: the bar floated half a header's height
   down its own scroller, the form scrolled underneath it, and the model
   dropdown opened below the bar instead of below the tab it belongs to.

   Inside a scroller of its own the answer is 0 — stick to the top of the thing
   you are in. */
html.desktop.nle-on #app #tabs {
  top: 0;
  /* Above the fields it pins over, and opaque all the way across, or the
     scrolled content shows through the gaps between the tabs. */
  z-index: 12;
  padding-top: 8px;
  box-shadow: 0 6px 8px -6px var(--scrim);
}
/* Anything else that measured itself against the fixed header from inside the
   column. Same cause, same fix. */
html.desktop.nle-on #app .sticky-under-header { top: 0; }

/* ---------- what is open, beside the logo ----------

   Application name, then the full path of the project file — the convention
   every other editor follows, and one worth following because a project name
   on its own is ambiguous the moment two of them are called Reshoot. The path
   is the only thing that answers "which one am I actually in". */

html.desktop.nle-on #header .brand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
html.desktop.nle-on #hdr-title {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
}
html.desktop.nle-on .hdr-app {
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: var(--text);
  white-space: nowrap;
}
/* Truncated from the LEFT. A path that runs out of room has to keep its tail —
   the folder and the file are what identify it; the drive letter is the part
   you can afford to lose. `direction: rtl` with the text isolated does that
   without measuring anything. */
html.desktop.nle-on .hdr-file {
  font-size: 9.5px; color: var(--text-faint);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left; unicode-bidi: plaintext;
}
html.desktop.nle-on .hdr-file.none { font-style: italic; opacity: .8; direction: ltr; }