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

/*
 * tree-ui-color-picker.css — Pinako's own colour picker (the SV square, the hue slider,
 * the eyedropper, the format toggle, undo / redo, Save). Travels with its code,
 * tree-ui-color-picker.js. Moved VERBATIM from pinako.html (U6 slice 8.4b, 2026-09-28)
 * so the portal draws the same card. Shared with the portal through the sync manifest
 * (scripts/shared-ui-manifest.json, dist: ships); edit HERE only, the portal copy is
 * generated. The card tokens (--card-bevel-r, --float-ring, --card-frame, ...) are
 * tree-ui.css's.
 */

/* Custom Color Picker */
/* Card surface — see the --card-* token block. */
.color-picker-popup {
  position: fixed;
  z-index: 10001;
  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;
  padding: 10px;
  width: 240px;
  font-family: inherit;
}
/* The picker (like the star palette, whose half of this rule stays in pinako.html)
   takes focus programmatically (tabindex="-1") so its own Escape handler works.
   They are card surfaces, not keyboard-tabbable
   controls, and Chrome's UA `outline: auto` ring drew a thick light halo
   outside the card edge. The card surface's bevel + --float-ring is the
   edge — same as .menu-dropdown and every other popup card. */
.color-picker-popup:focus,
.color-picker-popup:focus-visible {
  outline: none;
}
.color-picker-drag-handle {
  cursor: grab;
  height: 14px;
  margin: -10px -10px 8px -10px;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-picker-drag-handle::after {
  content: '';
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--icon-color);
  opacity: 0.3;
  transition: opacity 0.15s;
}
.color-picker-drag-handle:hover::after {
  opacity: 0.6;
}
/* Wears .general-btn .general-btn-primary; only its size in the picker
   footer is local. */
.color-picker-save {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 12px;
}
.color-picker-sv-area {
  width: 100%;
  height: 140px;
  border-radius: 4px;
  position: relative;
  cursor: crosshair;
  margin-bottom: 10px;
  border: 1px solid var(--item-border);
}
.color-picker-sv-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.6), inset 0 0 2px rgba(0,0,0,0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.light-mode .color-picker-sv-cursor {
  border-color: #333;
  box-shadow: 0 0 2px rgba(255,255,255,0.6), inset 0 0 2px rgba(255,255,255,0.3);
}
.color-picker-hue-slider {
  width: 100%;
  height: 14px;
  border-radius: 4px;
  position: relative;
  cursor: ew-resize;
  margin-bottom: 10px;
  background: linear-gradient(to right,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  border: 1px solid var(--item-border);
}
.color-picker-hue-cursor {
  position: absolute;
  width: 6px;
  height: 18px;
  top: -3px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
  transform: translateX(-50%);
  pointer-events: none;
  background: transparent;
}
body.light-mode .color-picker-hue-cursor {
  border-color: #333;
  box-shadow: 0 0 2px rgba(255,255,255,0.6);
}
.color-picker-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.color-picker-preview {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--item-border);
  flex-shrink: 0;
}
.color-picker-eyedropper {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  border-radius: 4px;
  color: var(--icon-color);
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.color-picker-eyedropper:hover {
  background: var(--item-hover);
  border-color: var(--accent-color);
}
.color-picker-eyedropper:focus {
  outline: none;
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-color) 50%, transparent);
}
.color-picker-format-toggle {
  flex: 1;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  transition: background 0.15s ease;
  user-select: none;
}
.color-picker-format-toggle:hover {
  background: var(--item-hover);
}
.color-picker-undo,
.color-picker-redo {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  border-radius: 4px;
  color: var(--icon-color);
  cursor: default;
  transition: background 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}
.color-picker-undo:hover:not(:disabled),
.color-picker-redo:hover:not(:disabled) {
  background: var(--item-hover);
}
.color-picker-undo:disabled,
.color-picker-redo:disabled {
  opacity: 0.4;
  cursor: default;
}
.color-picker-input-row {
  display: flex;
  gap: 8px;
}
.color-picker-value-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--item-border);
  border-radius: 4px;
  background: var(--item-bg);
  color: var(--text-color);
  font-size: 13px;
  font-family: monospace;
}
.color-picker-value-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent-color) 50%, transparent);
}
.color-picker-value-input.invalid {
  border-color: var(--search-clear-color);
}

/* The card frame's overlay (pinako.html's "card frame" block, U6 slice 8.3b; the
   border-box geometry of 2026-09-28). The same rule as the lists in tree-ui-menus.css,
   tree-ui-popups.css and pinako.html: the four copies must stay the same rule. The
   overlay covers the host's BORDER box with a transparent copy of the 1px right / bottom
   bevel, so its inset stack follows the host's inner curves; the picker is not a scroll
   box, so the 1px overhang never scrolls. The host stops drawing the frame itself
   (--card-inset): drawing both is a bug (double strength over transparent children). */
.color-picker-popup::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);
}
.color-picker-popup {
  --card-inset: 0 0 0 0 transparent;
}

/* The squircle corner (pinako.html's @supports block: radius x1.6 vs the base rule). */
@supports (corner-shape: squircle) {
  .color-picker-popup {
    corner-shape: squircle;
    border-radius: 9.6px;    /* was 6px */
  }
}