/* ============================================================
   POPPYJAM ✦ colorpicker.css — styles for the shared PJColorPicker
   (glass popover family — see .pj-modal). Moved out of style.css so
   the color-picker component ships as one self-contained unit (JS + CSS).
   ============================================================ */

/* [hidden] must beat any explicit display value (searchbar__menu idiom) */
.pj-colorpop[hidden]{display:none}

.pj-colorpop{
  position:fixed; /* JS positions + sets z-index inline */
  width:248px;padding:12px;border-radius:16px;
  background:rgba(14,14,42,.96);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  animation:pj-pop .13s ease-out;
}
.pj-colorpop__top{display:flex;align-items:center;gap:12px}

/* the hue ring is painted on ::before (conic gradient, masked into a ring) so
   the wheel element itself stays plain — mask'ing the element directly would
   swallow the child preview dot along with the gradient's center */
.pj-colorpop__wheel{position:relative;flex:none;width:104px;height:104px;border-radius:50%;cursor:pointer}
.pj-colorpop__wheel::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(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%));
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 55%);
  mask:radial-gradient(circle, transparent 54%, #000 55%);
}
.pj-colorpop__preview{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.25);
}
.pj-colorpop__thumb{
  position:absolute;width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:#fff;border:2px solid var(--navy-0);
}

.pj-colorpop__sliders{display:flex;flex-direction:column;gap:10px;flex:1}
.pj-colorpop__lab{font-family:var(--font-pixel);font-size:.5rem;text-transform:uppercase;color:rgba(255,255,255,.55)}
input.pj-colorpop__range{
  -webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);cursor:pointer; /* track gradient set inline by JS */
}
input.pj-colorpop__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--navy-0);cursor:grab;
}
input.pj-colorpop__range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--navy-0);cursor:grab;
}

.pj-colorpop__row{display:flex;gap:6px;margin-top:10px}
input.pj-colorpop__hex{
  flex:1;font-family:var(--font-pixel);font-size:.58rem;letter-spacing:.5px;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:8px 10px;outline:none;transition:border-color .15s,box-shadow .15s;
}
input.pj-colorpop__hex:focus{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,110,199,.22)}
.pj-colorpop__eyedrop,.pj-colorpop__save{
  border:none;cursor:pointer;border-radius:999px;padding:6px 9px;background:transparent;
  color:rgba(255,255,255,.7);transition:color .15s,background .15s;
}
.pj-colorpop__eyedrop{font-family:var(--font-display);font-weight:600;font-size:.78rem}
.pj-colorpop__save{font-family:var(--font-pixel);font-size:.55rem;letter-spacing:.5px;text-transform:uppercase}
.pj-colorpop__eyedrop:hover,.pj-colorpop__save:hover{color:#fff;background:rgba(255,255,255,.1)}

.pj-colorpop__palette{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.pj-colorpop__swatch{
  width:18px;height:18px;border-radius:6px;border:none;cursor:pointer;padding:0; /* JS sets the swatch fill */
  box-shadow:0 0 0 1px rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s;
}
.pj-colorpop__swatch:hover{transform:scale(1.15);box-shadow:0 0 0 2px rgba(255,255,255,.8)}

/* primary commit button — shown only when a caller passes onCommit ("stamp" flow).
   holo-gradient fill, same family as .pj-btn--go */
.pj-colorpop__commit[hidden]{display:none}
.pj-colorpop__commit{
  display:block;width:100%;margin-top:10px;border:none;cursor:pointer;border-radius:10px;padding:10px 12px;
  font-family:var(--font-pixel);font-size:.58rem;letter-spacing:.5px;text-transform:uppercase;color:#1a1140;
  background:var(--holo);background-size:300% 300%;animation:huemove 6s linear infinite;
  box-shadow:0 6px 20px rgba(255,110,199,.35);transition:transform .15s,box-shadow .15s;
}
.pj-colorpop__commit:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(255,110,199,.5)}

/* subtle "clear" / reset-to-default button — shown only when a caller passes onClear */
.pj-colorpop__clear[hidden]{display:none}
.pj-colorpop__clear{
  display:block;width:100%;margin-top:8px;cursor:pointer;border-radius:10px;padding:8px 12px;
  font-family:var(--font-pixel);font-size:.55rem;letter-spacing:.5px;text-transform:uppercase;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:color .15s,background .15s,border-color .15s;
}
.pj-colorpop__clear:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}