/* nle — the editor grid and its seams.
   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 EDIT SHELL — the editor's layout, with the panel living inside it.

   The Covert Editor's grid has five columns, and one of them — `gen` — is a
   slot the width of a generate panel. It was built to hold the editor's own
   cut-down copy of one. This is that slot holding the REAL one instead.

   THREE RULES THIS FILE OBEYS.

   1. NOTHING HERE APPLIES UNLESS THE SHELL IS ON. Every rule is under
      `html.desktop.nle-on`. In After Effects there is no `.desktop`, so this
      file is inert — After Effects is already an editor, and a timeline
      inside a panel inside an NLE is nobody's idea of a good afternoon. On
      the desktop with the shell off, the app is byte-for-byte the app it was.
      That is what makes this safe to ship before the engine exists.

   2. THE PANEL IS NOT RESTRUCTURED. `#app` keeps its markup, its ids and its
      own stylesheet; it is simply given a grid area to sit in. The shell's
      regions are SIBLINGS of it, so with them hidden the document lays out
      exactly as it did. No wrapper, no reparenting, nothing for the panel's
      own CSS to trip over.

   3. THE PANEL'S FIXED CHROME HAS TO COME INSIDE. The header is
      `position:fixed; left:46px; right:0` and the rail is a fixed strip — both
      measured against the WINDOW. Dropped into a grid cell they would still
      span the whole width and sit across the timeline. Under the shell they
      are re-anchored to the column instead, which is what the `contain` and
      the overrides at the bottom are for.
   ------------------------------------------------------------------ */

/* ---------- the grid ---------- */

html.desktop.nle-on, html.desktop.nle-on body {
  height: 100%;
  overflow: hidden;                 /* the regions scroll, not the document */
}

html.desktop.nle-on body {
  display: grid;
  /* `auto` for the header, not a fixed 44px — it is the panel's real header
     now rather than a strip the shell drew, and it sizes itself from its own
     padding and content. A number here would clip it the first time somebody
     changed the logo. */
  grid-template-rows: auto 1fr var(--nle-h-gal, 260px) var(--nle-h-tl, 300px);
  /* GENERATION NEXT TO THE PICTURE.

     It sat on the far right for a while, on the reasoning that the middle of
     the window belongs to what you are looking at and the edges to the things
     that feed it. That reads well and works badly: making a shot and looking
     at it are one action, and they were at opposite ends of a 1760px window
     with the viewer and the inspector between them. You typed on the right,
     the result appeared on the left, and your eye crossed the whole screen
     every generation.

     Sources on the left in the order you use them — what you already have,
     then the thing that makes more — with the picture immediately beside the
     prompt that produces it. The inspector stays on the far right because it
     describes the selection rather than feeding it.

     THE NORMAL VIEW IS THIS. Node view does not rearrange it: the graph docks
     over the viewer and inspector and the rest stays exactly where it is, so
     going into the graph and coming back is a change of what you are looking
     at rather than of where everything lives.

     Four columns, not five — the Shots column went when a shot became a clip
     on the timeline, and its grid of generations is a group in the browser. */
  /* THE VIEWER IS THE EXPLICIT COLUMN AND THE MAKE COLUMN IS THE LEFTOVER —
     swapped from how it began, and the swap is the fix for "I cannot drag the
     viewer". A 1fr column has no width of its own; its seams all belong to
     its neighbours, so dragging "the viewer" was always secretly dragging
     something else, with that something else's limits. Now the seam on the
     viewer's left edge writes --nle-w-view and the picture is exactly the
     width you put it at. minmax keeps the make column findable rather than
     letting a viewer drag erase it. */
  /* EVERY TRACK CAN SHRINK. THIS IS THE SAFETY NET, NOT THE LAYOUT.

     A plain `300px` track is 300px whether or not the window has 300px to
     give: three of them plus the make column's floor add up to about 1390px,
     and in a window narrower than that the grid simply overflows. The columns
     do not shrink, they run off the edge and out from under each other — which
     from the outside is "the panels overlap when I make it narrow".

     `minmax(0, Npx)` is the same width whenever there is room and a track that
     gives ground when there is not. js/nle.js does the real work of deciding
     WHO gives ground and by how much (fitFixedColumns); this is the floor
     under that, so a window narrower than the arithmetic can solve degrades to
     thin columns rather than to a pile.

     The make column loses its 140px floor for the same reason: a minimum on
     the flexible track is a minimum the fixed ones have to find, and it was
     the thing tipping the grid into overflow. Its floor is enforced in JS,
     where it can be weighed against everything else. */
  /* THE INSPECTOR COLUMN IS GONE. It described the selection rather than
     feeding it, and taking the fourth column out gives the viewer the room
     back rather than leaving a fourth strip nobody is in.

     `#nle-inspector` itself is not gone — Simon's FX-panel request (keyframed
     Position/Scale/Rotation/Opacity plus Masking) reuses that exact region
     rather than building a second one, but js/nle.js's mount() now nests it
     INSIDE #nle-bin's own markup, at the foot of the project panel, instead
     of appending it here as a fifth grid sibling. So it is no longer named in
     `grid-template-areas` and needs no rule in this file at all: it lays out
     as an ordinary flex child of #nle-bin's column (see 13-inspector.css),
     the same way #nle-fsbrowser and #nle-browser already do. `#nle-grip-insp`
     IS still dead — a resize handle for a column that is not a column — and
     stays hidden below. */
  /* THE GALLERY SITS UNDER THE PICTURE.

     Simon: "Let's adjust the interface so the gallery is under the viewer."

     It used to live in the MIDDLE column, beside the controls, sharing the
     `gen` cell with them behind a vertical seam. That put the thing you are
     judging (a generation) a column away from the thing you are judging it
     against (the shot on screen), with the prompt box in between — and it
     made the middle column carry two panes on a row that also had to hold a
     viewer and a project panel.

     Now the right-hand column is a stack: picture on top, what you have made
     underneath it. The two things your eye moves between are the two things
     that touch.

     WHICH COLUMN TAKES THE SLACK CHANGES WITH IT — but only in this layout,
     which is the whole of the rule below rather than a change here. `gen` was
     1fr and the viewer a fixed width because gen held two panes; with the
     gallery gone from it, it holds one column of fixed things and the 1fr
     wants to move to the viewer.

     NOT IN NODE VIEW, though, and this is the correction that matters. The
     columns are shared: docked, the graph lives in `gen` beside the controls,
     and 02-panes.css says so in as many words — "NODE VIEW IS DIFFERENT AND
     STAYS DIFFERENT. There the make column is sharing its width with the
     graph, which genuinely does want more room on a big shot". Making the
     swap here narrowed the node canvas, which re-wrapped every line of text
     on every node; what it looked like from outside was a test dragging
     across a chat answer and coming back one character short.

     So the base template is unchanged and the swap is scoped to
     :not(.nle-dock) below.

     `bin` and `gen` are named twice on purpose: an area repeated down two
     rows spans them, so the project panel and the controls stay full height
     and only the right-hand column is divided. */
  grid-template-columns:
    minmax(0, var(--nle-w-bin, 300px))
    minmax(0, 1fr)
    minmax(0, var(--nle-w-view, 700px));
  grid-template-areas:
    "top top top"
    "bin gen viewer"
    "bin gen gal"
    "tl  tl  tl";
  gap: 1px;
  background: var(--border);        /* the gap IS the grid line */
  /* ROOM FOR THE RAIL, down the left edge of the whole window. It is
     `position: fixed` and therefore out of the grid entirely, so the grid has
     to be told to start after it — padding on the grid container does that
     without adding a column, which would put a 1px grid line between the rail
     and the app and make it look like a pane. */
  padding-left: 46px;
}
/* THE EDIT LAYOUT ONLY: the make column is an explicit width and the picture
   takes the slack. See the note above — docked, the graph is in `gen` and
   needs the flexible column, so this deliberately does not apply there.

   IT WAS `auto` HERE FOR ONE COMMIT, AND `auto` IS WHAT KILLED THE SEAM.
   `auto` sizes the middle column to its contents, which is 380px of controls
   plus 20px of padding — the right ANSWER, arrived at in a way that leaves
   nothing to drag. With the viewer on `1fr` as well, `--nle-w-view` was
   written by every drag of #nle-grip-view and read by no rule in this file:
   setting it to 1100px moved the viewer from 1052x388 to 1052x388.

   So the same number is stated as a variable instead of derived. The default
   is 400px because that is exactly what `auto` was resolving to (#main's
   380 + #app's 2x10 padding, which is what js/nle.js's genMin() measures), so
   a window that has never had the seam touched lays out identically to the
   commit before this one — and now the seam has a property to write.

   Which side of the seam is the fixed one is the whole design here, and it is
   set out at length above LAYOUT.view in js/nle.js: the seam always sizes the
   column that is EXPLICIT in the current layout, and the other takes the
   leftover. Edit layout, that is the make column; docked, it is the viewer.
   Change one of these two facts without the other and you get the last
   commit's bug back — a handle that drags, persists a number, and moves
   nothing. */
html.desktop.nle-on:not(.nle-dock) body {
  grid-template-columns:
    minmax(0, var(--nle-w-bin, 300px))
    minmax(0, var(--nle-w-gen, 400px))
    minmax(0, 1fr);
}
/* CREATE IS TWO COLUMNS IN ONE CELL, AND NEEDS THE ROOM FOR BOTH.

   The Create pane stands in the same `gen` cell as the classic controls (see
   the long note in js/simple.js), but it is a task list AND a work column
   side by side -- Simon's reference layout is TASKS | MAKE | VIEWER. At the
   classic column's 400px the list took 315 of it and the work column was a
   60px sliver with every control wrapped onto its own line, which is what
   the first screenshot of it showed. So while Create is up the cell claims
   at least 1030px: the shot column, the 315px list and a 560px work column (fixed, at Simon's ask).
   max() rather than a replacement, so a seam somebody dragged WIDER is
   honoured; the number is only a floor. `sm-on` is written by covertSetView
   beside `nd-on`, and goes when you leave, so classic gets its own width
   straight back. */
html.desktop.nle-on:not(.nle-dock).sm-on body {
  grid-template-columns:
    minmax(0, var(--nle-w-bin, 300px))
    minmax(0, max(var(--nle-w-gen, 400px), 1030px))
    minmax(0, 1fr);
}
/* ...UNTIL SOMEBODY DRAGS IT. `sm-gen-set` is written by laySet (js/nle.js)
   the first time that seam moves, and the width it was dragged to is stored
   and restored on the next launch. The 1030 above is where Create OPENS;
   this is what stops it being a wall. It matters more since Classic came off
   the rail, because the app now lives in this view rather than visiting it:
   a floor you cannot get under is a seam that stops moving, which is exactly
   what Simon reported about the old make-column floor. */
html.desktop.nle-on:not(.nle-dock).sm-on.sm-gen-set body {
  grid-template-columns:
    minmax(0, var(--nle-w-bin, 300px))
    minmax(0, var(--nle-w-gen, 400px))
    minmax(0, 1fr);
}
/* THE ASK ROOM OPENS WIDE TOO, for the same reason and by the same rule.
   Simon: "stores all recent conversations on the left-hand side, so the
   user can pick previous conversations." A 190px list of conversations
   beside a chat in a 400px cell is a 200px chat, so the room hides the list
   under 600 (js/ask.js) -- which, at the classic column's width, is always.
   860 is the list, a 640 thread and its gutters. Same max() so a wider drag
   stands, same sm-gen-set so a narrower one does once somebody has made it. */
html.desktop.nle-on:not(.nle-dock).ask-on body {
  grid-template-columns:
    minmax(0, var(--nle-w-bin, 300px))
    minmax(0, max(var(--nle-w-gen, 400px), 860px))
    minmax(0, 1fr);
}
html.desktop.nle-on:not(.nle-dock).ask-on.sm-gen-set body {
  grid-template-columns:
    minmax(0, var(--nle-w-bin, 300px))
    minmax(0, var(--nle-w-gen, 400px))
    minmax(0, 1fr);
}
/* The grip is hidden rather than removed — see the note above the grid. It is
   a resize handle for a column that no longer has a place to drag to, and is
   dead weight now that #nle-inspector is a nested panel rather than a grid
   column (LAYOUT in js/nle.js no longer has an 'insp' entry, so makeGrips()
   does not even build this element any more — the rule is a belt-and-braces
   leftover in case something else ever creates one). #nle-inspector itself
   gets NO rule here: it is not a grid item any more, so it is not this file's
   business — see 13-inspector.css for how it is actually shown. */
html.desktop.nle-on #nle-grip-insp { display: none; }

/* ---------- the seams ----------

   Handles sit OVER the gaps rather than in the grid, so the grid stays five
   columns and three rows and the maths for what a drag means stays simple.
   Fixed-position and repositioned from the real boxes on every move, which is
   why re-ordering the columns above did not need a single change here.

   7px of target for a 1px line: a seam you have to hunt for is a seam nobody
   uses, and 1px is well under what a hand can hit on the first go. */
.nle-grip { display: none; }
html.desktop.nle-on .nle-grip {
  display: block; position: fixed; z-index: var(--z-menu);
  background: transparent; transition: background .12s;
}
html.desktop.nle-on .nle-grip.v { width: 7px; cursor: col-resize; }
html.desktop.nle-on .nle-grip.h { height: 7px; cursor: row-resize; }
html.desktop.nle-on .nle-grip:hover,
html.desktop.nle-on .nle-grip.dragging { background: var(--accent); }
/* AND THE TARGET IS WIDER THAN THE LINE.

   Simon: "I can't currently select the right-hand side of the gallery and
   click to expand it to be wider. I can on the left, but not on the right."

   Measured, in both layouts: the gallery's right edge IS the window's right
   edge - there is nothing over there to give up room, and no seam is
   missing. What he was reaching for is the boundary on the other side, and
   the reason it reads as one-sided is that 7px straddling the join leaves
   barely three pixels on the gallery's own side. Press four pixels into the
   gallery and you have missed.

   So the paint stays 7px - a wider line would read as a border rather than a
   join - and the TARGET grows either side of it. Done with a pseudo-element
   rather than by widening the box, because the box is what gets the accent
   on hover and a 15px accent bar is a different design. 4px each way takes
   the whole join to 15px, which is an ordinary splitter target and still
   narrow enough not to steal presses from the thumbnails beside it.

   Nothing inside a grip is interactive except the fold arrow, which sits in
   the middle of it and is painted above this. */
html.desktop.nle-on .nle-grip::before {
  content: ''; position: absolute; inset: -4px; display: block;
}
html.desktop.nle-on .nle-grip > * { position: relative; z-index: 1; }
/* The dock arrow, half way down the project column's seam. Quiet until the
   pointer is near it — a permanent control on a 7px line would read as
   damage — and always hittable, because it is the only way back once the
   column has gone. */
html.desktop.nle-on .nle-gfold {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 34px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text-faint);
  font: 800 9px/1 inherit; opacity: .35; transition: opacity .12s, color .12s;
}
html.desktop.nle-on .nle-gfold::before { content: '\25C2'; }
html.nle-binfolded.desktop.nle-on .nle-gfold::before { content: '\25B8'; }
html.desktop.nle-on .nle-grip:hover .nle-gfold,
html.desktop.nle-on .nle-gfold:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
/* Gone means the seam is the only thing left of the column, so the arrow on
   it stops being optional — and the seam itself widens into something you can
   hit without aiming, because now it is not a resize handle that happens to
   be there, it is the only way back. */
html.nle-binfolded.desktop.nle-on .nle-gfold { opacity: 1; }
html.nle-binfolded.desktop.nle-on #nle-grip-bin {
  width: 15px; cursor: pointer;
  background: var(--card); border-right: 1px solid var(--border);
}
html.nle-binfolded.desktop.nle-on #nle-grip-bin:hover { background: var(--card-hover); }
/* While dragging, nothing else may take the pointer or start selecting text —
   a drag that lands on an iframe or a canvas mid-move dies silently. */
html.desktop.nle-on.nle-dragging * { user-select: none !important; }
html.desktop.nle-on.nle-dragging iframe,
html.desktop.nle-on.nle-dragging canvas,
html.desktop.nle-on.nle-dragging video { pointer-events: none !important; }