/*
  Gener8 style kit — floating panels (js/float-panel.js).

  A floating panel sits in its docked place (set by the viewer's CSS) until it is
  dragged by its heading; then .floating places it by left/top wherever it was let go.

    .fhead       heading row: grip, title, Dock and Close buttons; drag here
    .fgrip       the small bar that shows it can be dragged
*/
.floating { transform: none !important; right: auto !important; bottom: auto !important; }
.dragging { opacity: .92; }
.fhead {
  display: flex; align-items: center; gap: calc(var(--u) * .8);
  padding: 0 0 calc(var(--u) * .8) calc(var(--u) * .4); cursor: grab;
}
.dragging .fhead { cursor: grabbing; }
.fgrip { width: calc(var(--u) * 3.2); height: calc(var(--u) * .45); border-radius: 99px; background: var(--ink); opacity: .7; flex: none; }
.fhead .title { flex: 1; margin: 0; }
.fhead .iconbtn { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }

/*
  Panel layout (js/panel-layout.js)

    .g8-tray       a stack of tabs on the left or right edge, centred on the reach line:
                   the Parts and Tools tabs and the tab of any folded panel
    .g8-ptab       the tab of a folded panel (its name; tap to open it again)
    .g8-folded     a folded panel (hidden; its tab is in a tray)
    .g8-fold       the fold button (a bar) in a panel's heading
*/
.g8-tray {
  position: absolute; top: var(--reach); transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; gap: calc(var(--u) * 1); pointer-events: none;
}
.g8-tray.left { left: 0; align-items: flex-start; }
.g8-tray.right { right: 0; align-items: flex-end; }
.g8-tray > * { pointer-events: auto; }
/* Tabs in a tray stack instead of each sitting on the reach line */
.g8-tray > .tab { position: static; transform: none; }
/* Beside an open side panel rather than on the screen's edge: a whole rounded tab */
.g8-tray.beside > .tab { border: 1px solid var(--panel-line); border-radius: var(--r-lg); }
.g8-ptab { max-width: calc(var(--u) * 14); text-align: center; }
.g8-ptab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.g8-folded { display: none !important; }
/* The card's fold button sits to the left of its close button */
.card .g8-fold { right: calc(var(--u) * 6); }
/* A moved side panel keeps its own place (left/top) instead of the reach line; closed, it
   just fades where it is */
.side.floating { transform: none !important; right: auto !important; transition: opacity .25s var(--ease); }