/* Colour palette generator - one strip of swatch buttons per harmony. Swatch colours are set from script. */
.cp-inrow { display: flex; gap: 6px; min-width: 0; }
.cp-pick { flex: none; width: 44px; min-width: 44px; padding: 3px; cursor: pointer; }
.cp-text { font-family: var(--e-mono); }
.cp-box { display: grid; gap: 10px; margin-top: var(--e-gap); }
.cp-name { margin: 0 0 4px; font-size: .82em; font-weight: 600; color: var(--e-ink-2); }
.cp-swatches { display: flex; border-radius: 9px; overflow: hidden; border: 1px solid var(--e-line); }
.cp-sw {
    flex: 1 1 0; min-width: 0; min-height: 52px; border: 0; padding: 4px 2px; cursor: pointer;
    font: 600 .72em/1.2 var(--e-mono); display: flex; align-items: flex-end; justify-content: center;
}
.cp-sw span { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.cp-sw:focus-visible { outline: 3px solid var(--e-focus); outline-offset: -3px; }
.cp-status { margin: 0; }
@media (max-width: 400px) { .cp-sw { font-size: .62em; } }