/* nle — region title strips, the project/browse tabs, the path.
   One section of the old nle.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* A region's title strip — the same shape in all of them, so the eye reads
   the shell as one thing rather than five panes that grew separately. */
.nle-head {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 7px 9px 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
}
.nle-head .sp { flex: 1; }

/* ---- THE PROJECT / BROWSE TABS ----

   Two alternatives rather than two panes: you are either working from the
   project or fetching something into it, never reading both at once, and a
   second permanent column would cost width the timeline needs. */
.nle-bintab {
  background: none; border: none; color: var(--text-faint);
  font-family: inherit; font-size: 9.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 5px; border-radius: 3px; cursor: pointer;
}
.nle-bintab:hover { color: var(--text-dim); }
.nle-bintab.on { color: var(--text); background: var(--bg); }

.nle-fsbrowser { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.nle-fsbrowser.hidden { display: none; }
/* THE BAR WRAPS RATHER THAN SPILLING.

   Two icon buttons, a "Choose folder…" button and a path, all `flex: none`, in
   a row that could not wrap: about 166px of things in a panel whose minimum is
   120. Nothing shrank and nothing moved down, so the row simply ran past the
   edge of the panel and over its neighbour.

   Wrapping is the whole fix: the path drops onto a second line when the
   buttons no longer fit beside it, which is the right thing to lose first —
   the buttons are targets you have to hit, the path is something you read. */
.nle-fsbar {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 6px 7px; border-bottom: 1px solid var(--border);
}
.nle-fsb {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit; font-size: 10px;
  padding: 3px 7px; border-radius: 3px; cursor: pointer; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nle-fsb:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.nle-fsb:disabled { opacity: .35; cursor: default; }
/* The path is the one thing here that can be arbitrarily long, and the END of
   it is the part that tells you where you are — so it truncates from the
   left. */
.nle-fspath {
  flex: 1 1 70px; min-width: 0; font-size: 9.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left; text-transform: none; letter-spacing: 0;
}
.nle-fsbrowser .nle-cards { flex: 1; min-height: 0; overflow-y: auto; }
/* A folder card has no picture, so it carries the word instead of an empty
   frame that reads as a thumbnail which failed to load. */
.nle-fsdir .nle-card-th {
  background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.nle-fsdir .nle-card-tag { position: static; }
.nle-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 9px; }

/* Scaffolding, and honest about it. These regions are empty until the engine
   lands; saying so beats five blank boxes that look like a failed render. */
.nle-todo {
  color: var(--text-faint); font-size: 10.5px; line-height: 1.5;
  border: 1px dashed var(--border-dash); border-radius: 3px;
  padding: 10px; text-align: center;
}