/* image-color-picker: styles only it uses, split out of site.css by scripts/split-css.mjs. */
canvas.is-interactive { cursor: crosshair; touch-action: none; }
.ie-hint { margin: 0; }
.cp-wrap { overflow: visible; }
.cp-loupe { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-3); pointer-events: none; image-rendering: pixelated; z-index: 2; }
.cp-current { display: flex; gap: 14px; align-items: center; }
.cp-swatch { flex: none; width: 72px; height: 72px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(15 29 58 / 0.15); }
.cp-codes { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-codes div { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
.cp-codes dt { color: var(--slate); font-size: 0.82rem; font-weight: 600; }
.cp-codes dd { margin: 0; }
.copy-code { font: 600 0.92rem var(--mono); color: var(--ink); background: none; border: 0; padding: 2px 6px; border-radius: 6px; cursor: copy; text-align: left; }
.copy-code:hover, .copy-code.is-copied { background: var(--paper); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 600 0.8rem var(--mono); color: var(--ink); cursor: copy; }
.cp-chip span:first-child { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(15 29 58 / 0.15); }
.cp-chip.is-copied { border-color: var(--good); }