/* Scoped to opted-in sheets; reusable inside other effect editors. */
:root {--cw-sheet-top-fade:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.8) 30%,rgba(255,255,255,0) 100%);--cw-sheet-fade-height:20px}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet {position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;min-height:0;max-height:100%;overflow:hidden;background:#fff;border:1px solid #ded7ec;border-radius:16px 16px 0 0;box-shadow:0 -4px 18px #33204c18;box-sizing:border-box;animation:cw-color-sheet-in .18s ease-out}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cw-color-sheet-handle {display:block;flex:none;width:100%;height:24px;min-height:24px;padding:0;border:0;border-radius:0;background:#fff;touch-action:none;cursor:ns-resize}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-handle::after {content:"";display:block;width:40px;height:4px;margin:auto;border-radius:4px;background:#d0c7de}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-head {display:flex;align-items:center;justify-content:space-between;flex:none;gap:12px;padding:0 12px 8px}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-head strong {font-size:15px;color:#252538}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-head button {flex:none;width:44px;height:44px;padding:0;border:1px solid #ded7ec;border-radius:8px;background:white;color:#292637;font-size:18px;cursor:pointer}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-body {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:0 12px 12px}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cwfx-sv {height:clamp(100px,18dvh,160px);position:relative;touch-action:none;border-radius:10px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);margin:0 0 4px}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-sv-cursor {position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 2px #333;pointer-events:none}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cwfx-hue {display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red) center/100% 10px no-repeat;touch-action:none;cursor:pointer}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-hue::-webkit-slider-runnable-track {height:10px;background:transparent;border:0}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-hue::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-6px;background:#793aff;border:2px solid #fff;border-radius:50%}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-hue::-moz-range-track {height:10px;background:transparent;border:0}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-hue::-moz-range-thumb {width:20px;height:20px;background:#793aff;border:2px solid #fff;border-radius:50%}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cwfx-hex {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:14px;font-weight:500}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-hex input {flex:1;min-width:0;width:100%;height:44px;padding:8px 10px;font-size:16px;border:1px solid #ded7ec;border-radius:8px;background:#fff;color:#252538}
:is(#kw-sticker,.cw-color-sheet-host) .cwfx-recent small {display:block;margin-bottom:6px;font-size:12px;color:#686474}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cwfx-chips {display:flex;flex-wrap:wrap;gap:8px;padding:2px}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cwfx-chip {flex:none;width:44px;height:44px;padding:0;border:2px solid #e5e0ed;border-radius:50%;cursor:pointer}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet :focus-visible {outline:3px solid #9b82e7;outline-offset:2px}
@keyframes cw-color-sheet-in {from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet {animation:none}}

/* Same compact chrome as the sticker catalogue; the scroller alone receives fade. */
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet {border:0;border-radius:18px 18px 0 0;box-shadow:0 -3px 15px #25272b0d;padding-bottom:env(safe-area-inset-bottom,0px)}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-head {position:relative;height:44px;min-height:44px;padding:0 52px 0 16px;gap:0}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-head strong {max-width:calc(50% - 12px);font-size:14px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;z-index:1}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet .cw-color-sheet-handle {position:absolute;inset:0;width:100%;height:44px;min-height:44px;background:transparent}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-handle::after {width:36px;height:4px;background:#d7d8df}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-head button:not(.cw-color-sheet-handle) {position:absolute;top:0;right:4px;border:0;border-radius:50%;background:transparent;color:#747985;font-size:26px;font-weight:400;line-height:1.3}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-viewport {position:relative;flex:1;min-height:0;display:flex;overflow:hidden}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-body {width:100%;padding-top:4px}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-viewport::after {content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:var(--cw-sheet-fade-height);background:var(--cw-sheet-top-fade);opacity:0;pointer-events:none}
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-viewport.is-scrolled::after {opacity:1}
:is(#kw-sticker,.cw-color-sheet-host) > .cw-color-sheet {position:fixed;z-index:4;max-height:none}
/* Leave a reliable finger scroll gutter beside the direct-manipulation palette. */
:is(#kw-sticker,.cw-color-sheet-host) .cw-color-sheet-body {padding-left:24px;padding-right:24px}