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

/*
 * tree-ui-popups.css — the tab-world ROW POPUPS' own rules: the floating memo and tags
 * popups (frame, header, move handle, resize grip, preview, tag editor rows), the star
 * palette (and the context menu's Star Color fly-out, which wears it), and the row-colour
 * palette.
 *
 * Cut VERBATIM out of pinako.html's <style> block by U6 chunk 5 (2026-09-26; the block's
 * 6-space indent removed, nothing else changed), together with their code, which moved to
 * tree-ui-popups.js (owner ruling D1 = A: feature CSS travels with its feature). A rule
 * came along when EVERY selector in its list names a class those popups build; lists
 * that also name other surfaces stayed in the page sheet: the card frame overlay
 * (::after + --card-inset), the squircle @supports block, and .floating-popup's
 * position:relative guard. U6 slice 8.3b split those lists by surface: the popups'
 * entries are at the END of this sheet (after the base rules their radius overrides).
 *
 * ONE FILE (scripts/shared-ui-manifest.json, dist: ships), beside its code the way
 * tree-ui-hud.css sits beside tree-ui-hud.js:
 *   popup   pinako.html links it right after tree-ui.css, before 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-popups.css; linked in chunk 8, together with
 *           the tree-ui-popups.js the portal re-bases its popups.js fork onto
 *   S17 app not inlined yet (manifest app.exclude): the app has no tab-world edit path
 * Edit HERE only; the portal copy is generated.
 */

.node-memo-textarea {
  width: 100%;
  min-height: 52px;
  max-height: 120px;
  resize: vertical;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--item-border);
  background: var(--item-bg);
  color: var(--text-color);
  outline: none;
  font-size: var(--font-main);
}
.node-memo-textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-color) 60%, transparent);
}

.node-memo-counter {
  font-size: 11px;
  color: var(--text-muted);
}

.tags-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  /* `overflow-y` here makes overflow-x compute to `auto` as well, so this
     box CLIPS on all four sides — and with no padding the rows sat flush
     against it, shearing the .tags-input focus glow off the left, the
     right, the top (first row) and the bottom (last row). Pad past the
     glow and pull the same amount back with negative margins: the rows
     land exactly where they did, and the glow has somewhere to paint.
     INVARIANT: this padding must stay GREATER than the blur radius on
     .tags-input:focus (5px) or the shearing returns. */
  padding: 6px;
  margin: -6px;
  overflow-y: auto;
}
.tags-input {
  width: 100%;
  height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--item-border);
  border-radius: 4px;
  background: var(--item-bg);
  color: var(--text-color);
  outline: none;
  font-size: var(--font-main);
  box-sizing: border-box;
}
.tags-input:focus {
  /* Lift the focused row above its LATER siblings. Rows paint in DOM
     order and the 4px gap is narrower than the 5px blur, so without this
     the next row's opaque background painted over the bottom of the glow
     — which is why the ring looked cut on a different side depending on
     whether the field was the first, a middle one, or the last. */
  position: relative;
  z-index: 1;
  border-color: var(--accent-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-color) 60%, transparent);
}
.tags-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.tag-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tag-row .tags-input {
  flex: 1 1 auto;
  min-width: 0;
}
.tag-delete-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 16px;
  line-height: 1;
  cursor: default;
  padding: 0 6px;
  height: 28px;
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease;
}
.tag-delete-btn:hover {
  opacity: 1;
  color: #d32f2f;
}

/* Floating Popup Styles (Memo & Tags) */
/* Card surface — see the --card-* token block. NOTE: .floating-popup-header
   below is deliberately translucent rather than opaque, because an opaque
   child paints over the parent's inset frame and would cut it off at the
   header's own edges (the same defect as .pinako-modal-buttons). */
.floating-popup {
  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 16px var(--menu-shadow), var(--card-inset);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-height: 120px;
  /* clip, not hidden: hidden makes the popup a scroll box, and the frame
     overlay's 1px overhang (it covers the border box) would then give it 1px
     of scroll. A capped popup (.popover-scrolls) still scrolls on y, with the
     overlay off. */
  overflow: clip;
  /* Entrance via @starting-style (see §3.8): transitions from the
     starting-style values below to the resting state on first render. */
  transition: opacity var(--motion-normal) var(--motion-ease-out),
              transform var(--motion-normal) var(--motion-ease-out);
}
@starting-style {
  .floating-popup { opacity: 0; transform: translateY(-4px) scale(0.985); }
}
/* TRANSLUCENT, not opaque (owner card pass, 2026-08-29). This strip
   touches the popup's top, left and right edges, and a child's
   background always paints over its parent's inset box-shadow — an
   opaque --item-bg fill cut the card frame off exactly where the header
   sat, the same defect .pinako-modal-buttons had. --item-bg is only 10%
   lighter than --panel-bg to begin with, so 55% keeps a readable strip
   while leaving ~45% of the frame visible. Tune the percentage, do not
   go back to opaque. */
.floating-popup-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--item-bg) 55%, transparent);
  border-bottom: 1px solid var(--item-border);
  gap: 6px;
  user-select: none;
}
.popup-move-handle {
  color: var(--icon-color);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: move;
  padding: 0 4px;
  opacity: 0.6;
}
.popup-move-handle:hover {
  opacity: 1;
}
.popup-title-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.popup-title {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.popup-subtitle {
  font-size: 11px;
  color: var(--text-color);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .popup-close-btn retired 2026-08-30 — the memo and tags popups build
   the shared close X via makeCloseButton({ small: true }), which brings
   its own sizing (.header-close-btn-small, above). */
.floating-popup-content {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}
.floating-popup-content .node-memo-textarea {
  width: 100%;
  height: 100%;
  min-height: 60px;
  resize: none;
}
.node-memo-preview {
  font-size: var(--font-main);
  color: var(--text-color);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  cursor: text;
  padding: 4px 2px;
  min-height: 40px;
}

.floating-popup-content .tags-list {
  max-height: none;
}
.floating-popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-top: 1px solid var(--item-border);
  gap: 8px;
  position: relative;
}
.floating-popup-footer .node-memo-counter {
  position: absolute;
  left: 8px;
}
.floating-popup-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.popup-resize-grip {
  position: absolute;
  right: 4px;
  bottom: 4px;
  color: var(--icon-color);
  font-size: 10px;
  cursor: nwse-resize;
  opacity: 0.5;
  padding: 2px;
  user-select: none;
}
.popup-resize-grip:hover {
  opacity: 1;
}

/* Star palette */
.star-palette {
  position: fixed;
  display: flex;
  /* Wrap-guard (owner 2026-07-30): the strip is registry-driven and
     unbounded — a DOM element can't overflow the popup window, so past
     the viewport width it wraps to a second row instead of the tail
     (incl. Clear) being clipped. Invisible below ~15 colors. */
  flex-wrap: wrap;
  max-width: calc(100vw - 12px);
  gap: 6px;
  padding: 6px 8px;
  /* 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);
  box-shadow: var(--float-ring), 0 4px 12px var(--menu-shadow), var(--card-inset);
  border-radius: 6px;
  z-index: 1000;
}
.star-swatch {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: default;
  border: 1px solid transparent;
}
.star-swatch:hover {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.star-swatch.swatch-focused {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

/* S3.8b — labeled flags: the palette is a vertical list, one row per
   color showing its swatch and its label (owner choice A, 2026-07-25). */
.star-palette-list {
  flex-direction: column;
  gap: 1px;
  padding: 4px;
  /* FIXED width, not min-width: no row may resize the palette. Expanding
     a row into a name field used to widen the list ~80px mid-interaction
     (a bare <input> carries a ~177px intrinsic width), which shoved the
     list past the popup's right edge. Long labels ellipsize instead —
     see .star-swatch-label. */
  width: 232px;
  max-width: calc(100vw - 16px);
  /* Its 70% height cap is fitPopoverToViewport's maxVh (tree-ui-popups.js):
     a max-height + overflow-y:auto here kept the list a scroll box at every
     size, and the frame overlay's 1px overhang gave it a phantom scrollbar. */
}
.star-palette-list .star-swatch-row {
  width: auto;
  height: auto;
  min-height: 26px;
  justify-content: flex-start;
  gap: 8px;
  padding: 3px 8px 3px 6px;
  cursor: pointer;
}
.star-swatch-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.star-swatch-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A greyed SUGGESTION, never a stored value — tab-world colors ship
   unlabeled and this is the hint about what to name them. */
.star-swatch-label.star-swatch-suggest { opacity: 0.45; font-style: italic; }
.star-swatch-edit,
.star-swatch-remove {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.star-palette-list .star-swatch-row:hover .star-swatch-edit,
.star-palette-list .star-swatch-row:hover .star-swatch-remove,
.star-palette-list .star-swatch-row.swatch-focused .star-swatch-edit,
.star-palette-list .star-swatch-row.swatch-focused .star-swatch-remove { opacity: 0.6; }
.star-swatch-edit:hover,
.star-swatch-remove:hover {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--accent-color) 22%, transparent);
}
/* The ✓ confirming a new color is the expanded row's primary action, so
   it stays visible. Hiding it behind hover the way the per-row pencil
   does left the row looking like Enter was the only way to commit. */
.star-palette-list .star-swatch-add .star-swatch-edit { opacity: 0.75; }
.star-label-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 0; /* an input's intrinsic width must never size the palette */
  font-size: 13px;
  font-family: inherit;
  color: var(--text-color);
  background: var(--input-bg, var(--panel-bg));
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  padding: 1px 5px;
  outline: none;
}
/* Swatch button that opens Pinako's own color picker (never the native
   <input type="color"> well). Its fill is set inline from the picker. */
.star-add-color {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--item-border);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.star-add-color:hover { border-color: var(--accent-color); }
.star-add-color:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 1px;
}
/* Separator above the trailing Clear row so the actions read apart from
   the colors. Only the COLOR is set here: .star-swatch already supplies
   the 1px transparent border this borrows, and the shorthand used to
   redeclare width/style at a specificity that beat the hover/focus ring
   below, leaving a focused Clear row with three accent sides and a grey
   top. It also no longer squares off its top corners — the row sits
   inside the list's padding, so it should read like every other row. */
.star-palette-list .star-swatch-clear {
  margin-top: 4px;
  padding-top: 5px;
  border-top-color: var(--item-border);
}
/* Hover and the keyboard cursor own the row's border on all four sides,
   and outrank the Clear separator above. */
.star-palette-list .star-swatch-row:hover,
.star-palette-list .star-swatch-row.swatch-focused {
  border-color: var(--accent-color);
}
/* The color this node currently carries. A tint, never a ring: the ring
   is the keyboard cursor and appears only once the keyboard is in use. */
.star-palette-list .star-swatch-current {
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

/* Row color palette (for Group nodes) */
/* Card surface — see the --card-* token block. */
.row-color-palette {
  position: fixed;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  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);
  border-radius: 6px;
  z-index: 1000;
}
.row-color-swatch {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: default;
  border: 1px solid transparent;
}
.row-color-swatch:hover {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.row-color-swatch.swatch-focused {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

/* ── The card frame, painted above the children (the popups' 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 popups. 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-menus.css's and tree-ui-color-picker.css's. */
/* .floating-popup is position:fixed, but INLINE from its builders rather than
   from this sheet, so a bare .floating-popup is static and its overlay would
   anchor to some ancestor instead. The inline fixed still wins; this only stops
   the overlay from silently escaping if a builder ever forgets. */
.floating-popup {
  position: relative;
}
.floating-popup::after,
.star-palette::after,
.row-color-palette::after {
  content: '';
  position: absolute;
  /* The host's BORDER box, with a transparent copy of the bevel border: see
     pinako.html's list. */
  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);
}
.floating-popup,
.star-palette,
.row-color-palette {
  --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) {
  .floating-popup {
    corner-shape: squircle;
    border-radius: 9.6px;   /* was 6px */
  }
}