/* js/picked.js: Picked colors -- the swatch-stack button and its sheet (Browse / Select / Build a palette). */

/* the small stack button, dropped into the loupe UI, a readout card, the painting page, Look closer, Studio */
.pk-stackbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(236,232,223,.14)}
.pk-stackbtn-sw{position:relative;width:28px;height:22px;flex:none}
.pk-stackbtn-sw i{position:absolute;top:0;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--surface-2)}
.pk-stackbtn-sw i:nth-child(1){left:0;z-index:3}
.pk-stackbtn-sw i:nth-child(2){left:7px;z-index:2}
.pk-stackbtn-sw i:nth-child(3){left:14px;z-index:1}
.pk-stackbtn b{font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums}

/* the Look closer header carries one in the top bar, right beside Done (js/paintzoom.js) */
.glz-top .pk-stackbtn{flex:none;height:36px;background:rgba(255,255,255,.12);color:#fff}
.glz-top .pk-stackbtn-sw i{box-shadow:0 0 0 2px rgba(20,19,17,.8)}
/* the "From a photo" sheet's header carries one too, pinned to the far right (js/settray.js sxPhotoSheet) */
.sx-head [data-pk-slot]{margin-left:auto;flex:none}

/* Studio's row, next to Kept (js/rooms2.js r2StudioHome) */
.pk-studiorow .pk-stackbtn-sw{margin-right:2px}
.pk-studiorow-t{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pk-studiorow-t b{font:400 22px/1.1 var(--serif)}
.pk-studiorow-t em{font:italic 400 15px/1.2 var(--serif);color:var(--soft)}

/* the sheet itself */
.pk-sheet{padding-bottom:calc(var(--bottom) + 24px)}
.pk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pk-head h2{font:400 30px/1.02 var(--serif);letter-spacing:-.02em;margin:2px 0 0}
.pk-sub{font:400 15px/1.4 var(--sans);color:var(--soft);margin:0 0 12px}
.pk-modebar{display:flex;width:100%;margin-bottom:14px}
/* a plain <button> defaults to white-space:nowrap in most engines, so flex:1's shrink alone just lets the text
   spill past the button's (and the sheet's) own edge instead of wrapping -- confirmed with a real screenshot
   (David, 2026-10-10 craft pass): clip and ellipsize instead, the same promise every other truncated label here keeps. */
.pk-modebar button{flex:1 1 0;min-width:0;padding:0 6px;font:400 15px/1 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a fixed 4-wide grid. Two bugs found by an actual screenshot (David, 2026-10-10 craft pass), both the same
   root cause: a bare `1fr` track has an implicit min-width of its content's min-content size, not 0 -- a long
   unbroken label ("Bottle green" as one word-wrapped unit) was growing its track past its 1/4 share and
   pushing the whole grid past the sheet's own padded edge. minmax(0,1fr) removes that implicit minimum (the
   standard fix); the label itself also gets the same overflow/ellipsis guard as every other truncated label here. */
.pk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.pk-chip{position:relative;aspect-ratio:1;border-radius:var(--r-card);background:var(--c);display:flex;align-items:flex-end;padding:8px;overflow:hidden;min-width:0}
.pk-chip b{display:block;width:100%;font:500 12px/1.2 var(--sans);color:var(--ink-dynamic,inherit);text-align:left;overflow-wrap:break-word}
.pk-chip[data-ink="dark"]{color:#141311}
.pk-chip[data-ink="light"]{color:#fff}
.pk-chip.on{box-shadow:inset 0 0 0 3px var(--paper)}
.pk-chip-check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--paper-ink)}
.pk-chip-check svg{width:13px;height:13px}

.pk-build-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:4px;min-height:52px}
.pk-build-strip.empty{align-items:center}
.pk-build-empty{font:italic 400 14px/1.3 var(--serif);color:var(--faint);white-space:nowrap}
.pk-bchip{position:relative;flex:none;width:52px;height:52px;border-radius:var(--r-card);background:var(--c);display:flex;align-items:flex-end;padding:6px;touch-action:none}
.pk-bchip.dragging{z-index:2;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:none}
.pk-bchip b{display:none}
.pk-bchip-n{position:absolute;top:4px;left:5px;font:600 11px/1 var(--mono);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);font-style:normal}
.pk-namefield{display:block;margin:4px 0 12px}
.pk-namefield span{display:block;font:italic 400 13px/1.3 var(--serif);color:var(--soft);margin-bottom:4px}
.pk-namefield input{width:100%;height:48px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--surface-2);color:var(--ink);font:400 17px/1 var(--serif)}
.pk-save{width:100%;margin-bottom:14px}

.pk-selbar{margin-bottom:14px}
.pk-selacts{display:flex;flex-wrap:wrap;gap:8px}
.pk-selacts button{flex:1 1 auto;min-height:44px;padding:0 14px;border-radius:999px;background:var(--surface-2);color:var(--ink);font:400 15px/1 var(--serif);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pk-selacts button svg{width:16px;height:16px}
.pk-selacts button.danger{color:var(--bad)}
.pk-selacts button:disabled{opacity:.4}

.pk-clearall{width:100%;min-height:48px;font:400 15px/1 var(--serif);color:var(--faint)}