/* nle — the make column, the two scroll panes and the gallery.
   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 panel takes the slot the editor kept for a generate panel. */
html.desktop.nle-on #app {
  grid-area: gen;
  min-width: 0; min-height: 0;
  overflow: auto;
  background: var(--bg);
  /* No rail gutter any more. The rail is the application's, pinned to the
     window's left edge, and this column stopped having to hold space for it
     the day it stopped containing it. */
  padding: 0 10px 14px 10px;
  position: relative;
}

/* ---------- AND THE MAKE COLUMN'S CONTENTS LET GO TOO ----------

   Widening the shell's own limits was only half of it. #app is one grid cell
   now, but the two things inside it were sized for a window they no longer
   own: #main is `width: 380px; flex: 0 0 380px` — a hard number that never
   shrinks — and #gallery-pane carries `min-width: 250px`. Between them they
   put a ~640px floor under the column, and #app scrolls, so dragging the seam
   past that produced a horizontal scrollbar instead of a narrower column. The
   seam moved, the number changed, and the picture beside it did not grow.

   So under the shell both become flexible and both may shrink. They keep a
   flex-basis close to their old sizes, which is what they settle at when there
   is room; the difference is that now there is a way down from it. */
html.desktop.nle-on #app > #layout { min-width: 0; }

/* ---------- TWO PANES, TWO SCROLLBARS, NEITHER CARRYING THE OTHER ----------

   The make column was ONE scrolling box holding the controls and the gallery
   side by side. Scroll to see a thumbnail four rows down and the prompt box,
   the model picker and the Generate button all leave the screen with it — so
   the answer to "what did that look like" costs you the place you were
   working. And #gallery-pane was sized `max-height: calc(100vh - 56px)`,
   which is the WINDOW's height: under the shell this column is a grid cell of
   some other height entirely, so the gallery ran on past the bottom of it and
   under the daily-spend bar, which is what put a second scrollbar on the
   column in the first place.

   So the column stops scrolling and the two things inside it scroll
   themselves. The controls stay where they were put; the gallery scrolls
   under its own heading; the spend bar is a footer that nothing runs beneath.
   Every pane in the chain needs `min-height: 0`, because a flex item's
   default floor is its content and one missing floor puts the scrollbar back
   on the column. */
html.desktop.nle-on #app {
  overflow: hidden;
  display: flex; flex-direction: column;
}
html.desktop.nle-on #app > #layout {
  flex: 1 1 auto; min-height: 0; align-items: stretch;
}
html.desktop.nle-on #main {
  min-height: 0; overflow-y: auto; overflow-x: hidden;
}
html.desktop.nle-on #gallery-pane {
  min-height: 0; max-height: none; position: static; overflow: hidden;
}
html.desktop.nle-on #gallery-scroll { min-height: 0; }
/* A footer, not something sticky floating over the bottom of a scroll. */
html.desktop.nle-on #spendbar { position: static; flex: 0 0 auto; }
html.desktop.nle-on #main {
  /* Basis 200, not 340. The controls take the LEFTOVER of the make column, so
     their basis is a starting hint rather than a claim — and a claim is what
     340 was: gallery 260 + controls 340 + the seam is 606, so in an ordinary
     column the row was already over budget and every pixel the gallery seam
     asked for came back shrunk by about two thirds. The seam moved, the number
     in the variable moved, and the pane on screen moved a third as far, which
     is the seam not working. Small basis, grow 1: the gallery gets the width
     it was dragged to, the controls get the rest, and when the whole column is
     dragged genuinely small both still give ground instead of overflowing. */
  /* Zero here for consistency with the rule that actually binds — the
     :not(.nle-dock) one further down, which is later in the cascade and
     carries the whole note about why the floor went. A dead 250 sitting here
     reads like a live one. */
  width: auto; flex: 1 1 200px; min-width: 0; min-height: 0;
}
/* ---------- AND THE CONTROLS FILL THE COLUMN THEY ARE IN ----------

   THIS RULE USED TO PIN #main TO 380px IN MAKE VIEW, and the reasoning was
   sound at the time: the controls are a column of fixed things, nothing in
   them gets better at 500px, and the gallery was standing right beside them
   taking whatever they did not use. Every pixel the seam gave the controls
   was a pixel off the thumbnails, so pinning the controls and letting the
   gallery grow was the right trade.

   THE GALLERY IS NOT BESIDE THEM ANY MORE. It moved out to its own cell under
   the viewer (f424515), which left a fixed 380px pane in a column with
   nothing else in it — so everything past 380 was simply blank. Simon:
   "the generation panel has a blank section to its right previously housing
   for the gallery, can we lose that as its now redundant." Exactly right, and
   the blank was worst for anyone carrying a `covert_nle_gen` from when that
   column held both panes, because their column came back 600-odd pixels wide
   with 380 of controls in it.

   So the premise is gone and the rule goes with it. The controls fill their
   column, which also gives the seam something worth doing: widen it and the
   reference slots reflow to another column and the prompt box gets longer;
   narrow it and the picture beside it gets bigger. Floored at 250 so the
   prompt box is never squeezed into a slot.

   NODE VIEW ALREADY WORKED THIS WAY — the make column shares its width with
   the graph there and has always flexed — which is why this rule was scoped
   away from it and why removing the scope is safe: both layouts now do the
   same thing for the same reason. */
/* NO FLOOR HERE ANY MORE, AND THAT WAS THE LOCK.

   Simon: "There is something weird happening when I try and resize the
   panels. The viewer panel, I can't make it a very big size... It seems to
   lock. We need it so each panel can always be scaled up to really any width
   or height in a pretty free, easy way."

   A pane's min-width is not a property of the pane: it is a floor under the
   COLUMN, because a grid track cannot be narrower than what is standing in
   it. 250 here plus the column's own 20 of padding meant the make column
   stopped at 270 however far the seam was dragged, which on an 1872px
   workspace capped the viewer at 1482 — measured. The seam went on moving
   under the pointer with nothing changing, which is exactly what "it seems
   to lock" describes.

   The old floor was a judgement about usefulness — "below about 250 the
   controls stop being controls" — and it is a fair judgement to have about
   your own window and the wrong one to enforce on somebody else's. #app
   scrolls, so a column dragged below what the controls want is a column with
   a scrollbar rather than a column that refuses. */
html.desktop.nle-on:not(.nle-dock) #main {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
/* The gallery absorbs the change instead of holding a width of its own — with
   the controls fixed there is nothing for a seam between them to do, so it
   goes rather than sitting there taking drags that move nothing. */
html.desktop.nle-on:not(.nle-dock) #gallery-pane { flex: 1 1 auto; min-width: 0; }
html.desktop.nle-on:not(.nle-dock) #gallery-resizer { display: none; }
/* The gallery is a sized pane with its own seam, like the viewer — the same
   promotion for the same reason: a flexible pane cannot be dragged, only
   squeezed by whatever its neighbour does. #gallery-resizer has sat unwired
   in the markup since before the shell existed; it is the handle now. */
html.desktop.nle-on #gallery-pane {
  /* 0 1, not 0 0: the set width is what the gallery HOLDS when there is room,
     not a demand it presses when the whole column has been dragged small —
     shrink stays on so a narrow make column squeezes the gallery instead of
     growing a scrollbar under it. */
  /* AND NO FLOOR HERE EITHER, for the reason above and for a second one that
     is a plain bug rather than a judgement: a 250px minimum inside a column
     dragged to 60 does not shrink the gallery, it OVERFLOWS it. Measured, at
     the end of a drag: a 250-wide pane sitting in a 60-wide cell, hanging out
     over the column beside it — which is Simon's "it seems to butt up against
     the gallery space, nesting the gallery space to the left of the viewer".
     The pane was not nesting anywhere; it was refusing to fit and spilling. */
  min-width: 0; flex: 0 1 var(--nle-w-galpane, 260px);
}
html.desktop.nle-on #gallery-resizer {
  display: block; flex: 0 0 6px; align-self: stretch;
  cursor: col-resize; border-radius: 3px; background: transparent;
}
html.desktop.nle-on #gallery-resizer:hover,
html.desktop.nle-on #gallery-resizer.dragging { background: var(--accent); opacity: .55; }
/* The Luma-wide override is a fixed width for the same reason and has the same
   problem; under the shell the column is already whatever you dragged it to. */
html.desktop.nle-on body.luma-wide #main,
html.desktop.nle-on.luma-wide #main { width: auto; flex: 1 1 480px; }
/* The button rows wrap rather than setting the floor. A single-line strip of
   toolbar buttons is as wide as its buttons, and a flex row that will not wrap
   is a hard minimum for everything above it — which is the same fault as the
   two rules above, one level down. Wrapping costs a second row at narrow
   widths and nothing at all at normal ones. */
html.desktop.nle-on .img-toolbar,
html.desktop.nle-on .gal-tools,
html.desktop.nle-on .gfilter,
html.desktop.nle-on #gfilter { flex-wrap: wrap; }