/* Styles for the interactive preset-browser menu styles (basic/categorized/advanced),
   split out of vellum-app.css so this feature's CSS doesn't grow that file further.

   Deliberately not reusing .w-menu here — that class sets justify-content:flex-end for
   the old static placeholder, which would fight this widget's prev/name/next layout.

   Editing happens on canvas (the same dropdown used for browsing doubles as the editor),
   not in the inspector — so there's no separate cramped tree editor in the side panel. */

/* Style choice — folded into the top of the existing "menu style" inspector section.
   Radio buttons stack one per row regardless of label length, so unlike a row of tabs
   they never need a shrink-to-fit fix for the narrow dock panel. */
.pb-style-radio-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.pb-style-radio{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.pb-style-radio input{ width: auto; margin: 0; cursor: pointer; }
.pb-style-radio:hover{ color: var(--ink); }

.pb-theme-row{ display: flex; gap: 6px; margin-bottom: 10px; }
.pb-theme-btn{
  flex: 1;
  border: 1px solid;
  border-radius: 4px;
  padding: 6px 4px;
  font-family: 'IBM Plex Mono', monospace;
  /* Matches .pb-style-radio's own --font-sm — was --font-xs, which per that token's own
     definition is for "eyebrow/meta labels," not a button's primary text; sitting right below
     the basic/categorized/advanced radios at a visibly smaller size read as inconsistent. */
  font-size: var(--font-sm);
  cursor: pointer;
}
.pb-theme-btn:hover{ filter: brightness(1.08); }

.preset-menu{
  border: 1.5px solid;
  background: transparent;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 2px;
  padding: 0 4px;
  gap: 4px;
  font-family: inherit;
}
.preset-menu-nav{
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.15em;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
  cursor: pointer;
}
.preset-menu-nav:hover{ opacity: 0.7; }
.preset-menu-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.preset-menu-categorized .preset-menu-trigger,
.preset-menu-advanced .preset-menu-trigger,
.preset-menu-basic .preset-menu-trigger{ cursor: pointer; }

/* Canvas dropdown — browsing and editing both render inside this same overlay, appended
   as a child of the widget's own .widget element (which is position:absolute already,
   so this anchors directly below the trigger and inherits canvas zoom for free). */
.pb-dropdown{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 20;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-sm);
}
/* Wireframe-mode dropdown-size preview — same position:absolute/top:100% anchor as the real
   .pb-dropdown above, but purely a sizing aid: dashed, no content, and pointer-events:none
   so it never intercepts a click meant for the canvas or another widget underneath it. Only
   the handle re-enables pointer-events, matching how .resize-handle already behaves. */
.pb-dd-size-preview{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  box-sizing: border-box;
  border: 1.5px dashed var(--hair-strong);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 19;
}
.pb-dd-size-label{
  display: block;
  padding: 6px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
}
.pb-dd-size-handle{
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--ink);
  border-radius: 2px;
  cursor: nwse-resize;
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: auto;
}
/* Full-canvas only — mirrors .pb-dd-size-handle at the opposite corner, dragging the top
   margin instead of the bottom one. */
.pb-dd-size-handle-top{
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--ink);
  border-radius: 2px;
  cursor: nesw-resize;
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: auto;
}
/* Chrome inside the dropdown (toolbars, headers, hover states) is tinted relative to the
   menu's OWN text color via currentColor rather than this builder's --workspace/--hair
   theme variables — otherwise a custom-colored menu still shows the builder's own gray
   chrome bleeding through, which is exactly the "takes on the mood of our builder" problem
   this was built to avoid. Active/selected states use --pb-accent (set inline per-widget
   by dropdownStyleAttr(), falling back to the amber var(--amber) only if that's ever unset). */
.pb-dd-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.pb-dd-toolbar-label{
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--font-xs);
}
.pb-dd-edit-btn{
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: auto;
}
.pb-dd-edit-btn:hover{ background: color-mix(in srgb, currentColor 12%, transparent); }
.pb-dd-toolbar-info{ display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.pb-dd-toolbar-actions{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pb-dd-toolbar-msg{
  font-size: var(--font-xs);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-dd-import-btn{
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: var(--font-xs);
  flex-shrink: 0;
  cursor: pointer;
}
.pb-dd-import-btn:hover{ background: color-mix(in srgb, currentColor 12%, transparent); }
.pb-dd-close-btn{
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.pb-dd-close-btn:hover{ background: color-mix(in srgb, currentColor 12%, transparent); }
/* Full-canvas (advanced style only) — a much bigger visual commitment than the anchored
   dropdown, so it gets a stronger shadow and a z-index high enough to sit above every other
   widget regardless of DOM/paint order (ordinary .pb-dropdown's z-index:20 assumes it's only
   ever competing with widgets it's already stacked near; full-canvas needs to beat all of
   them since it can cover the entire artboard). */
.pb-dropdown-fullcanvas{
  z-index: 60;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* Browsing (read-only) */
.pb-dd-category-name{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  white-space: nowrap;
}
.pb-dd-category-name:hover{ background: color-mix(in srgb, currentColor 10%, transparent); }
.pb-dd-category.expanded .pb-dd-category-name{ color: var(--pb-accent, var(--amber)); }
.pb-dd-chev{ opacity: 0.6; flex-shrink: 0; }
.pb-dd-preset{
  padding: 7px 10px 7px 20px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  white-space: nowrap;
}
.pb-dd-preset:hover{ background: color-mix(in srgb, currentColor 10%, transparent); }
.pb-dd-preset.active{ background: color-mix(in srgb, var(--pb-accent, var(--amber)) 25%, transparent); }
.pb-dd-empty{ padding: 10px; opacity: 0.6; }

/* Editing — styled to look like an editable version of the browsing tree above (indented
   presets under a bold category header) rather than a generic stacked-inputs form. */
.pb-tree-cat{ border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.pb-tree-cat:last-child{ border-bottom: none; }
.pb-tree-cat-header{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  min-width: 0;
}
.pb-tree-presets{ padding: 2px 0 6px; }
.pb-tree-preset-row{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 22px;
  min-width: 0;
}
.pb-tree-input{
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 5px 6px;
  border-radius: 4px;
}
.pb-tree-input:hover{ border-color: color-mix(in srgb, currentColor 30%, transparent); }
.pb-tree-input:focus{ outline: none; border-color: var(--pb-accent, var(--amber)); background: color-mix(in srgb, currentColor 6%, transparent); }
.pb-tree-input-preset{ font-weight: 400; opacity: 0.85; }
.pb-tree-remove{
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
}
.pb-tree-remove:hover{ opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.pb-tree-add{
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  font-family: inherit;
  font-size: inherit;
  padding: 6px 6px 6px 22px;
  cursor: pointer;
}
.pb-tree-add:hover{ opacity: 1; }
.pb-tree-add-category{
  padding-left: 8px;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* Advanced style — the "full UI browser" look: a wider two-column browse view instead of
   a slim dropdown, closer to the CREATR/Auto-Tune references than categorized's single
   accordion list. */
.pb-dropdown-advanced{ min-width: 320px; }
.pb-adv-columns{ display: flex; max-height: 260px; }
.pb-adv-col{
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  max-height: 260px;
}
.pb-adv-col-cats{ border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.pb-adv-bank-label{
  padding: 6px 10px 4px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--font-xs);
}
.pb-adv-cat-row{
  padding: 6px 10px 6px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.pb-adv-cat-row:hover{ background: color-mix(in srgb, currentColor 10%, transparent); }
.pb-adv-cat-row.active{ background: color-mix(in srgb, var(--pb-accent, var(--amber)) 25%, transparent); }
.pb-adv-preset-row{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.pb-adv-preset-row.active{ background: color-mix(in srgb, var(--pb-accent, var(--amber)) 25%, transparent); }
.pb-adv-thumb{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 4px;
  font-size: var(--font-xs);
}
.pb-adv-preset-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.pb-adv-fav{
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
}
.pb-adv-fav:hover{ background: color-mix(in srgb, currentColor 12%, transparent); }
.pb-adv-fav.active{ color: var(--pb-accent, var(--amber)); opacity: 1; }

/* Advanced editing — one more nesting level (bank) above categorized's tree */
.pb-tree-bank{ border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.pb-tree-bank:last-child{ border-bottom: none; }
.pb-tree-bank-header{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  min-width: 0;
}
.pb-tree-bank-header .pb-tree-input{ font-size: 1.05em; }
.pb-tree-bank-cats{ padding-bottom: 2px; }
.pb-tree-add-bank{ border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }

/* Favorite-icon picker, shown at the top of advanced edit mode */
.pb-fav-picker{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  flex-wrap: wrap;
}
.pb-fav-picker-label{
  opacity: 0.6;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 2px;
  flex: 1 0 100%;
}
.pb-fav-picker .pb-tree-input{
  flex: 0 0 auto;
  width: 40px;
  text-align: center;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.pb-fav-quick{
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.pb-fav-quick:hover{ border-color: color-mix(in srgb, currentColor 50%, transparent); }
.pb-fav-quick.active{ border-color: var(--pb-accent, var(--amber)); background: color-mix(in srgb, var(--pb-accent, var(--amber)) 20%, transparent); }