/*
   ═══════════════════════════════════════════════════════════════════════════
   GENERATED COPY — DO NOT EDIT. Source: <extension repo>/Pinako/tree-ui-hud.css
   Regenerate with: node "Pinako Pro/_build/sync-shared.mjs"
   (see that script's header for the shared-source rules)
   ═══════════════════════════════════════════════════════════════════════════
*/

/*
 * tree-ui-hud.css — the floating selection bar every tree panel shows while a selection
 * mode owns it (multi-select in both worlds, duplicate review). Travels with its code,
 * tree-ui-hud.js, which mounts the bar and owns the motion; this sheet owns the look and
 * the push band. Shared with the portal and the S17 app through the sync manifest
 * (scripts/shared-ui-manifest.json, dist: ships); edit HERE only, the portal copy is
 * generated.
 *
 * The bar floats at the top of the panel's TREE area (--ms-glow-top is the scroll host's
 * offset below any header), over a band the tree is pushed down to make room for. The
 * push is the scroll host's padding, so the host's frame and scrollbar stay put and only
 * the rows move; scrolled rows pass under the bar like any float.
 */

.panel-hud,
.panel-hud-open > .panel-scroll {
  --panel-hud-height: 32px;
  --panel-hud-gap: 10px;  /* above the bar */
  --panel-hud-band: calc(var(--panel-hud-gap) + var(--panel-hud-height));
}
.panel-hud-open,
:has(> .panel-hud) { position: relative; } /* a leaving bar keeps its anchor */
.panel-hud-open > .panel-scroll {
  padding-top: var(--panel-hud-band);
}
/* The top edge fade (the scroll host's sticky ::before scrim: pinako.html in the popup,
   pinako.css on the portal) stays at the host's top edge instead of riding down onto the
   first row: pulled up into the band, and pinned by the band's depth too, since a sticky
   box pins below its scroll host's padding. The margins net to zero, so the rows do not
   move. */
.panel-hud-open > .panel-scroll.panel-scroll-tree::before,
.panel-hud-open > .panel-scroll.session-scroll::before {
  top: calc(-1 * var(--panel-hud-band));
  margin-top: calc(-1 * var(--panel-hud-band));
  margin-bottom: calc(var(--panel-hud-band) - var(--edge-fade-top, 0px));
}
.panel-hud {
  position: absolute;
  top: calc(var(--ms-glow-top, 0px) + var(--panel-hud-gap));
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  height: var(--panel-hud-height);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  border-radius: 999px;
  box-shadow: 0px 0px 4px var(--accent-color);
  z-index: 60;
  font-size: var(--font-small);
  color: var(--text-color);
  white-space: nowrap;
}
.panel-hud-leaving { pointer-events: none; }
.panel-hud .ms-hud-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: default;
  color: var(--icon-color);
}
.panel-hud .ms-hud-btn:hover {
  color: var(--accent-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-color) 50%, transparent);
}
.panel-hud.ms-hud-empty .ms-hud-btn,
.panel-hud.dup-hud-empty .ms-hud-btn,
.panel-hud .ms-hud-btn.dup-hud-btn-off {
  opacity: 0.35;
  pointer-events: none;
}
.panel-hud .ms-hud-done {
  background: transparent;
  border: 1px solid var(--item-border);
  border-radius: 999px;
  color: var(--text-color);
  font-size: var(--font-small);
  padding: 2px 10px;
  cursor: default;
}
.panel-hud .ms-hud-done:hover {
  border-color: var(--accent-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-color) 50%, transparent);
}