/* Shared colour picker body (shared/color/picker.js). Neutral colours: it takes the host's text colour. */
.scp { display: grid; gap: 8px; min-width: 0; width: 100%; color: inherit; font-size: 11px; }
.scp-sv { position: relative; width: 100%; height: 130px; border-radius: 4px; cursor: crosshair; touch-action: none; }
.scp-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.scp-bars { display: grid; gap: 6px; }
.scp-bar { position: relative; height: 12px; border-radius: 6px; cursor: ew-resize; touch-action: none; }
.scp-hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.scp-checker { background-color: #fff; background-image: linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; }
.scp-alpha-fill { position: absolute; inset: 0; border-radius: 6px; }
.scp-bdot { position: absolute; top: -3px; width: 8px; height: 18px; margin-left: -4px; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.scp-top { display: flex; align-items: center; gap: 8px; }
.scp-prev { width: 36px; height: 26px; border-radius: 3px; border: 1px solid rgba(127, 127, 127, .6); flex: 0 0 auto; overflow: hidden; }
.scp-prev-fill { width: 100%; height: 100%; }
.scp-grid { display: grid; gap: 6px; }
.scp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scp-f { display: flex; align-items: center; gap: 3px; min-width: 0; }
.scp-fl { font-size: 10px; opacity: .7; flex: 0 0 auto; }
.scp-hex, .scp-n { min-width: 0; width: 100%; height: 24px; padding: 0 4px; box-sizing: border-box; font: inherit; font-family: var(--mono, monospace); color: inherit; background: transparent; border: 1px solid rgba(127, 127, 127, .5); border-radius: 3px; }
.scp-hex { flex: 1 1 auto; text-transform: uppercase; }
.scp-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scp-n { -moz-appearance: textfield; appearance: textfield; }
.scp-sec { display: grid; gap: 4px; }
.scp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 3px; }
.scp-sw { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid rgba(127, 127, 127, .5); border-radius: 2px; overflow: hidden; cursor: pointer; }
.scp-sw:hover { transform: scale(1.12); }
.scp-sw-fill { position: absolute; inset: 0; }
.scp-none { opacity: .6; grid-column: 1 / -1; }