/* PANEL NAME TABS — see js/panelarrange.js for what they do and why.

   Simon: "make it so each panel has a small tab top left of it, as name of
   the panel — clicking there and dragging around app allows the
   rearrangement."

   One tab per panel, top-left, always visible. It is the panel's name and it
   is the handle: there is nothing to switch on and nothing to discover. The
   previous version was a mode behind an icon in the header, and the report on
   it was "the layout changes don't appear to have worked" — which is what an
   undiscoverable control looks like from outside. */

/* The four-squares header button that used to be styled here is gone.
   Simon: "Remove the reset panels menu item in the top right, as it's no
   longer needed now that we have the little tabs." The reset itself moved to
   Window ▸ Reset panel layout — see desktop/main.js buildWindowSubmenu. */

/* ---------- room for the tabs ----------

   Every panel keeps a strip clear at its top so a tab never sits on top of a
   control. This is the part that has to be per-panel, because the panels are
   genuinely different: three already had their name in that corner and two
   had working controls there.

   Done as padding on the panel rather than by moving anything inside it, so
   no panel's own markup has to know this feature exists. */
html.desktop.nle-on #nle-bin,
html.desktop.nle-on #nle-viewer,
html.desktop.nle-on #gallery-pane,
html.desktop.nle-on #nle-timeline { padding-top: 19px; }
/* #app carries `padding: 0 10px 14px` and a `padding-top: 0` of its own from
   03-shell.css, so it is named separately. Its top-left is a row of tool
   icons — the one panel where a tab would have covered something you press
   all day. */
html.desktop.nle-on #app { padding-top: 19px; }

/* ---------- the tabs ---------- */

#pa-tabs { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-menu); }

/* THE TAB IS A STRIP HOLDING TWO CONTROLS. The name is the drag handle and
   the × beside it closes the panel — two different acts, so two real buttons
   rather than one button with a hit-test inside it. Nesting a button in a
   button is invalid markup that browsers silently un-nest, which would have
   moved the close control somewhere other than the tab with no error to say
   why. */
.pa-tab {
  position: fixed; pointer-events: auto;
  margin: 0; padding: 0;
  border: 1px solid var(--border); border-top: none; border-left: none;
  /* Square into the panel's own corner and rounded away from it, so it reads
     as a tab belonging to the panel rather than a chip floating over one. */
  border-radius: 0 0 3px 0;
  background: var(--card);
  display: flex; align-items: stretch; overflow: hidden;
  transition: background .12s, border-color .12s;
}
.pa-tab-grab, .pa-tab-x {
  margin: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; color: var(--text-dim);
  transition: color .12s, background .12s;
}
.pa-tab-grab {
  padding: 3px 7px 3px 8px;
  font-size: 8.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.35;
  cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px; min-width: 0;
}
/* SIX DOTS SAY IT IS DRAGGABLE. A label on its own reads as a title; a grip
   beside it is the one piece of iconography everybody already knows means
   "pick this up". Drawn rather than an image so it takes the text colour. */
.pa-tab-grab::before {
  content: ''; flex: none; width: 5px; height: 9px; opacity: .55;
  background-image: radial-gradient(currentColor 42%, transparent 46%);
  background-size: 2.5px 3px;
}
/* SEPARATED FROM THE NAME BY A REAL LINE. A × butted straight against the
   label is a × you press by accident reaching for the drag handle, and the
   thing it does — take the panel off the screen — is exactly the one you do
   not want happening by accident. */
.pa-tab-x {
  padding: 0 6px 1px; font-size: 12px; line-height: 1;
  border-left: 1px solid var(--border);
  display: flex; align-items: center; opacity: .6;
}
.pa-tab:hover { background: var(--card-hover); border-color: var(--text-dim); }
.pa-tab:hover .pa-tab-grab { color: var(--text); }
.pa-tab:hover .pa-tab-grab::before { opacity: 1; }
.pa-tab:hover .pa-tab-x { opacity: 1; }
.pa-tab-x:hover { color: #fff; background: var(--danger, #c0392b); opacity: 1; }
.pa-tab.lift { background: var(--accent); border-color: var(--accent); }
.pa-tab.lift .pa-tab-grab { cursor: grabbing; color: #fff; }
.pa-tab.lift .pa-tab-x { color: #fff; }

/* While a panel is being dragged nothing underneath may start selecting text
   or take the pointer — the same guard the seams use mid-drag, for the same
   reason: a drag that lands on a canvas or an iframe dies silently. */
html.pa-dragging * { user-select: none !important; }
html.pa-dragging iframe, html.pa-dragging canvas, html.pa-dragging video { pointer-events: none !important; }

/* What is under the pointer, offset clear of it so it never hides the panel
   you are aiming at. */
.pa-ghost {
  position: fixed; z-index: calc(var(--z-menu) + 2); pointer-events: none;
  transform: translate(13px, 13px);
  font: 800 8.5px/1 inherit; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  border-radius: 3px; padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

/* THE GAP IT WOULD DROP INTO. A LINE, not the panel lit up.

   Simon: "It should be clicking and dragging and putting in the gaps between
   different panels... it will slot between the two rather than a drag to swap
   or replace." The old version highlighted a whole panel because the gesture
   was a swap, and a line would have promised an insertion that did not
   happen. It happens now, so the line is the honest drawing of it: it sits in
   the gap, it says "here, between these two", and that is exactly what
   letting go does.

   The glow rather than a hairline because the gaps in this grid are 1px, and
   a 1px indicator in a 1px gap is invisible against a grid line that is
   already there. */
#pa-target {
  position: fixed; pointer-events: none; display: none;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px 2px color-mix(in srgb, var(--accent) 55%, transparent);
  z-index: calc(var(--z-menu) + 1);
}

/* ---------- and the names that were already there ----------

   Three panels printed their own name in the very corner the tab now sits in,
   so with the tab drawn they said it twice: VIEWER above VIEWER. These are
   inert labels, not controls — the tab has taken over the job, and it does
   more, because it also says the panel can be moved.

   The project panel is deliberately NOT in this list. Its PROJECT and FX are
   switchable tabs rather than a title, so they have to stay; a panel called
   Project holding a Project tab and an FX tab is how every editor lays this
   out and reads correctly. */
html.desktop.nle-on .nle-vlabel,
html.desktop.nle-on .nle-tl-title { display: none; }
/* The gallery's is HIDDEN RATHER THAN REMOVED, because its header is a flex
   row and the title is what holds the filter and view buttons over on the
   right. Taking it out of the flow let the whole toolbar slide left into the
   space, which moved six controls somebody has muscle memory for to fix a
   label nobody was reading twice. Keeping the box and emptying it leaves
   every button exactly where it was. */
html.desktop.nle-on .gallery-head > .sec-title { visibility: hidden; }

/* ---------- room for the tab over the node graph ----------

   The graph is not in the grid: it is pinned over the make column's box
   (js/nle.js dockRect), so the padding the make column reserves for its tab
   is underneath it and does nothing. Without this the tab sits directly on
   top of the graph's own "NODE SPACES" heading. */
html.desktop.nle-on.nle-dock #ndmod { padding-top: 19px; }