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

/*
 * tree-ui-menus.css — the tab-world MENUS' own rules: the menu card (.menu-dropdown) and
 * its open state, category and separator rows, the floated close-X header, hover
 * submenus and the fly-out chevron, the context menu's fly-out panels, the compact
 * checklist variant, the universal popup fit's scroll mode (.popover-scrolls), the
 * toolbar fly-out's text rows, and the toolbar scroll strip (chevrons + scroller).
 *
 * Cut VERBATIM out of pinako.html's <style> block by U6 chunk 6 (2026-09-26; the block's
 * 6-space indent removed, nothing else changed), together with their code, which moved to
 * tree-ui-menus.js (owner ruling D1 = A: feature CSS travels with its feature). A rule
 * came along when EVERY selector in its list names a class that code builds; lists that
 * also name other surfaces stayed in the page sheet: the card frame overlay (::after +
 * --card-inset), the squircle @supports block, and the lists shared with the primary's
 * static #tree-ops-menu. The close X's rules stay there too: they share lists with
 * .search-results-close, and the small variant must follow the .nav-btn rules.
 * U6 slice 8.3b split the frame overlay and squircle lists by surface: the menus' entries
 * are at the END of this sheet (after the base rules their radius overrides). U6 slice
 * 8.4 moved the toolbar fly-out's own rules here too (its card, open state, swoop and lit
 * state), lists that name the popup's static #tree-ops-menu included, because the
 * portal's fly-outs now mount through mountFlyoutMenu and wear the same card.
 *
 * ONE FILE (scripts/shared-ui-manifest.json, dist: ships), beside its code the way
 * tree-ui-popups.css sits beside tree-ui-popups.js:
 *   popup   pinako.html links it right after tree-ui.css and before tree-ui-popups.css
 *           and its <style> block, so the moved rules keep their order against
 *           tree-ui.css and every page rule of equal specificity that used to follow
 *           them still does
 *   portal  synced to portal/css/tree-ui-menus.css; linked in chunk 8, together with
 *           the tree-ui-menus.js the portal re-bases its context-menu.js fork onto
 *   S17 app not inlined yet (manifest app.exclude): the app has no tab-world menus
 * Edit HERE only; the portal copy is generated.
 */

/* Card surface — see the --card-* token block at the top of this sheet
   for the method (no top/left border; bevel on right+bottom; ring, drop
   shadow, insets in that order). */
.menu-dropdown {
  position: absolute;
  top: 36px;
  left: 5px;
  background: var(--panel-bg);
  border-top: none;
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--panel-bg) var(--card-bevel-r), black);
  border-bottom: 1px solid color-mix(in srgb, var(--panel-bg) var(--card-bevel-b), black);
  box-shadow: var(--float-ring), 0 4px 12px var(--menu-shadow), var(--card-inset);
  z-index: 100;
  min-width: 180px;
  padding: 6px 0;
  border-radius: 8px;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity var(--motion-normal) var(--motion-ease-out),
    transform var(--motion-normal) var(--motion-ease-out),
    visibility 0s linear var(--motion-normal);
}
.menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s;
}

.menu-category { padding: 4px 16px; font-size: 14px; font-weight: bold; text-transform: uppercase; color: var(--text-secondary); opacity: 0.8; }

.menu-item-has-submenu { position: relative; }
/* Card surface — see the --card-* token block. */
.menu-submenu {
  position: absolute;
  left: calc(100% - 4px);
  top: -4px;
  background: var(--panel-bg);
  border-top: none;
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--panel-bg) var(--card-bevel-r), black);
  border-bottom: 1px solid color-mix(in srgb, var(--panel-bg) var(--card-bevel-b), black);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 210px;
  display: none;
  box-shadow: var(--float-ring), 0 4px 12px var(--menu-shadow), var(--card-inset);
  z-index: 101;
}
.menu-item-has-submenu:hover > .menu-submenu,
.menu-item-has-submenu.submenu-open > .menu-submenu { display: block; }
.submenu-arrow { margin-left: auto !important; margin-right: 0 !important; width: 14px !important; height: 14px !important; opacity: 0.6; }

.menu-flyout-panel .menu-item-label,
.menu-flyout-panel .menu-category {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact variant (opt-in via showAnchoredMenu opts.menuClass): dense
   checklist menus (session View/Filter dropdown). Normal menus unchanged.
   CAUTION: overflow-y:auto forces overflow-x to auto too — do NOT apply
   .menu-compact to a menu with .menu-item-has-submenu rows (the absolute-
   positioned .menu-submenu flyout would clip at this box). */
/* padding-top 0 so the .menu-context-header sits flush at the top edge.
   The cap lives here; the SCROLLING lives on .menu-scroll below. */
.menu-compact { max-height: 70vh; padding-top: 0; }

.menu-compact .menu-category { padding: 3px 16px; font-size: 13px; }

/* Any menu carrying the floated X, capped or not: its own top padding
   would inset the scroll box and push the scrollbar down again. The
   clearance lives on .menu-scroll instead. */
.menu-dropdown:has(> .menu-context-header) { padding-top: 0; }

/* overflow-y:auto forces overflow-x to auto too, which clips an
   absolutely-positioned fly-out at the scroll box (see the .menu-compact
   caution below). A capped menu therefore drops its inline submenus out
   of the gutter and expands them in place instead — same :hover /
   .submenu-open reveal, nothing left to clip. */
.popover-scrolls .menu-item-has-submenu,
.popover-scrolls .rte-context-menu-item { flex-wrap: wrap; }
.popover-scrolls .menu-submenu,
.popover-scrolls .rte-context-submenu {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  padding: 2px 0 2px 14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.menu-separator { margin: 6px 0; border-top: 1px solid var(--item-border); opacity: 0.9; }

/* Close-X header. Sticky by default so it stays reachable in ANY menu that
   scrolls (today: .menu-compact checklists; automatically correct for any
   future scrollable menu). Inert in non-scrolling menus — sticky only
   engages once a scroll container exists. */
/* FLOATED, not a row (owner 2026-08-30). It was an in-flow flex row
   above .menu-scroll, which meant the scroll box — and therefore its
   SCROLLBAR — started below the header instead of at the popup's top
   edge. The Connected Sources modal does not do that: its X is
   absolutely positioned over .pinako-modal-body, so the scrollbar runs
   the full height and the X steps LEFT by the gutter instead of pushing
   anything down. Menus now match it exactly.
   --modal-scrollbar-gutter is measured by trackFloatingCloseGutter() in
   pinako.js — the same function the modal uses — and is 0px when nothing
   scrolls, so the X sits flush right until a scrollbar actually appears.
   z-index 4 puts it above the ::after card frame (3). The button has no
   background, so sitting above the frame cannot block it; being below
   would tint the glyph.
   No background and not sticky: the rows scroll UNDER nothing, because
   the header is not in the scrolled content at all. */
.menu-context-header {
  position: absolute;
  /* 4px, not 2 (owner 2026-08-30): at 2px the mark sat a touch high
     against the first row. Safe to tune here — this class is built by
     the two menu builders and nothing else wears it. */
  top: 4px;
  right: calc(6px + var(--modal-scrollbar-gutter, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
}

/* Chevron buttons for scrolling */
.toolbar-scroll-chevron {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 37px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent2-color) 80%, transparent);
  border-bottom: none;
		border-top: none;
  cursor: default;
  flex-shrink: 0;
  color: var(--icon-color);
  padding: 0;
}
.toolbar-scroll-chevron.chevron-left {
		border-left: none;
  position: relative;
}
.toolbar-scroll-chevron.chevron-right {
		border-right: none;
  position: relative;
  right: -6px;
		margin-left: -6px;
}
.toolbar-scroll-chevron:hover svg {
  opacity: 1;
}
.toolbar-scroll-chevron.visible {
  display: flex;
}
.toolbar-scroll-chevron svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
/* Scrollable container for note tabs */
.toolbar-tabs-scroll {
  display: flex;
  align-items: flex-end;
 /* gap: 8px; */
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding-right: 4px;
}

/* Invisible spacer to make scroll container tall enough for tab shadows */
.toolbar-tabs-scroll::after {
  content: '';
  min-height: 36px; /* matches toolbar height, provides top space for shadows */
  width: 0;
  flex-shrink: 0;
}

/* ── The toolbar fly-out: trigger, card, open state, swoop, lit state ───────
   Cut VERBATIM out of pinako.html's <style> block by U6 slice 8.4 (visual
   re-review F3): the portal's tree-ops and collapse fly-outs mount through
   mountFlyoutMenu too, so the card they wear travels with the code that
   builds them, and the portal's older copy (a full 1px border and the old
   shadow under the shared frame) is gone. The lists still name the popup's
   static #tree-ops-flyout / #tree-ops-menu / #btn-tree-ops, as the frame
   overlay's list below does. */
/* Tree-ops flyout: trigger icon expands into a vertical icon menu on
   hover; click pins it open (touch has no hover). */
#tree-ops-flyout, .tree-ops-flyout { position: relative; display: flex; align-items: center; }
/* position: fixed escapes the search-toolbar wrapper's overflow:hidden
   (needed there for its slide animation); JS sets the coordinates from
   the trigger's rect on hover/click. */
#tree-ops-menu, .tree-ops-menu {
  position: fixed;
  top: var(--tree-ops-menu-y, 0);
  left: var(--tree-ops-menu-x, 0);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  /* Card surface — see the --card-* token block. */
  background: var(--panel-bg);
  border-top: none;
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--panel-bg) var(--card-bevel-r), black);
  border-bottom: 1px solid color-mix(in srgb, var(--panel-bg) var(--card-bevel-b), black);
  border-radius: 6px;
  box-shadow: var(--float-ring), 0 4px 12px var(--menu-shadow), var(--card-inset);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* Shown via .open on the MENU itself — at init the menu is re-parented
   to document.body to escape #search-toolbar's z-index:9 stacking
   context (which would trap it beneath the tree rows), so descendant
   hover selectors can't drive it; JS owns open/close (hover + click). */
#tree-ops-menu.open, .tree-ops-menu.open {
  opacity: 1;
  pointer-events: auto;
}
/* Open cascade — each icon swoops in along a 9-to-6 arc, growing as it
   falls, with a small lateral bounce as it lands. The path is a real
   curve, so the keyframes are BAKED, not hand-authored: they were
   sampled at 5% steps from a quadratic Bézier (start up-left → control
   at the lower-left corner → rest slot) with the easings pre-applied,
   then emitted as composed transforms. That is the only way CSS traces
   an actual curve — a few hand-set keyframes let CSS re-ease between
   them and collapse the swoop into a diagonal or a right-angle L. Because
   each frame is already resolved, the animation runs LINEAR (no re-easing)
   and everything lives in ONE transform on the button (translate before
   scale, so the offset is unscaled — never split scale onto the svg, a
   parent scale would magnify the child's translate and reverse it
   mid-flight). Tuned values (see tree-ops-flyout-animation-lab.html):
   duration 240ms · stagger 70ms · start size 0.10 · dist 10×23px ·
   curve 1.05 · lateral bounce 3.5px · fade-in over first 30%.
   fill-mode backwards (NOT both) holds each icon invisible through its
   stagger delay but releases the transform after landing, so the global
   .nav-btn:active press-scale keeps working. */
#tree-ops-menu.open .nav-btn, .tree-ops-menu.open .nav-btn {
  animation: tree-ops-drop 0.24s linear backwards;
}
#tree-ops-menu.open .nav-btn:nth-child(2), .tree-ops-menu.open .nav-btn:nth-child(2) { animation-delay: 0.07s; }
#tree-ops-menu.open .nav-btn:nth-child(3), .tree-ops-menu.open .nav-btn:nth-child(3) { animation-delay: 0.14s; }
#tree-ops-menu.open .nav-btn:nth-child(4), .tree-ops-menu.open .nav-btn:nth-child(4) { animation-delay: 0.21s; }
#tree-ops-menu.open .nav-btn:nth-child(5), .tree-ops-menu.open .nav-btn:nth-child(5) { animation-delay: 0.28s; }
@keyframes tree-ops-drop {
  0%   { opacity: 0; transform: translate(-10px, -23px) scale(0.1); }
  5%   { transform: translate(-9.86px, -16.77px) scale(0.188); }
  10%  { transform: translate(-9.35px, -12px) scale(0.271); }
  15%  { transform: translate(-8.59px, -8.4px) scale(0.35); }
  20%  { transform: translate(-7.66px, -5.74px) scale(0.424); }
  25%  { transform: translate(-6.62px, -3.81px) scale(0.494); }
  30%  { opacity: 1; transform: translate(-5.54px, -2.45px) scale(0.559); }
  35%  { transform: translate(-4.46px, -1.51px) scale(0.62); }
  40%  { transform: translate(-3.41px, -0.88px) scale(0.676); }
  45%  { transform: translate(-2.42px, -0.48px) scale(0.728); }
  50%  { transform: translate(-1.52px, -0.23px) scale(0.775); }
  55%  { transform: translate(-0.74px, -0.1px) scale(0.818); }
  60%  { transform: translate(-0.07px, -0.03px) scale(0.856); }
  65%  { transform: translate(0.46px, 0px) scale(0.89); }
  70%  { transform: translate(0.84px, 0.01px) scale(0.919); }
  75%  { transform: translate(1.07px, 0.01px) scale(0.944); }
  80%  { transform: translate(1.15px, 0.01px) scale(0.964); }
  85%  { transform: translate(1.08px, 0px) scale(0.98); }
  90%  { transform: translate(0.86px, 0px) scale(0.991); }
  95%  { transform: translate(0.49px, 0px) scale(0.998); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #tree-ops-menu.open .nav-btn, .tree-ops-menu.open .nav-btn { animation: none; }
}
/* Mode-active states on the flyout icons */
#btn-tree-ops.mode-active,
.tree-ops-flyout > .nav-btn.mode-active,
#tree-ops-menu .nav-btn.mode-active,
.tree-ops-menu .nav-btn.mode-active {
  color: var(--accent-color);
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* TEXT entries (the Collapse fly-outs, owner 2026-09-23): styled like a
   context-menu row rather than an icon button. They take the same
   tree-ops-drop swoop and stagger as the icons, scaled from their LEFT
   edge: a wide row scaled from its centre would bloom outward from the
   middle instead of dropping in from the trigger's corner. */
.tree-ops-menu .flyout-text-item {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  padding: 4.4px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-color);
  font-size: var(--font-main);
  cursor: default;
}
.tree-ops-menu .flyout-text-item:hover,
.tree-ops-menu .flyout-text-item:focus-visible { background: var(--item-hover); outline: none; }
.tree-ops-menu.open .flyout-text-item {
  transform-origin: left center;
  animation: tree-ops-drop 0.24s linear backwards;
}
.tree-ops-menu.open .flyout-text-item:nth-child(2) { animation-delay: 0.07s; }
@media (prefers-reduced-motion: reduce) {
  .tree-ops-menu.open .flyout-text-item { animation: none; }
}
/* A fly-out's "you are here" entry (S4d-iii, the session panels' view
   menu): lit like a mode, and inert — it names the current view. */
.tree-ops-menu .nav-btn[aria-current="true"] { pointer-events: none; }

/* ── The card frame, painted above the children (the menus' share) ──────────
   Split out of pinako.html's cross-cutting lists by U6 slice 8.3b, so the
   portal's copy of this sheet carries the frame with the menus. The method
   and its reasons are documented once, at the page's lists in pinako.html
   ("THE CARD FRAME, PAINTED ABOVE THE CHILDREN"); the rules below must stay
   the same rule as the page's, tree-ui-popups.css's and tree-ui-color-picker.css's. A pointer-events:none
   ::after carries the --card-frame stack above every child, and the host stops
   drawing it itself (drawing both shows an opaque child as a seam). It covers
   the host's BORDER box with a transparent copy of the bevel border, so its
   inset stack is drawn inside the same padding edge, on the same curves, as
   the host's own would be (see pinako.html's list for why). */
.menu-dropdown::after,
.menu-submenu::after,
#tree-ops-menu::after,
.tree-ops-menu::after {
  content: '';
  position: absolute;
  inset: 0 -1px -1px 0;
  border: 0 solid transparent;
  border-right-width: 1px;
  border-bottom-width: 1px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  corner-shape: inherit;
  box-shadow: var(--card-frame);
}
.menu-dropdown,
.menu-submenu,
#tree-ops-menu,
.tree-ops-menu {
  --card-inset: 0 0 0 0 transparent;
}
/* Squircle corners (Chrome 139+; the rest keep the base radius): the radius
   scales 1.6x inside the gate, as pinako.html's @supports block explains. */
@supports (corner-shape: squircle) {
  .menu-dropdown {
    corner-shape: squircle;
    border-radius: 12.8px;   /* was 8px */
  }
}