/* Colour palette generator: base colour, tonal scale, harmonies and code. Loaded only on /tools/color-palette/. */

.cp-fields { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--matrix-space-12); align-items: start; }
.cp-field { min-width: 0; }
.cp-inputs { display: flex; gap: var(--matrix-space-8); align-items: center; }
.cp-picker { width: 44px; height: var(--matrix-control-min-height); padding: 2px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); cursor: pointer; flex: none; }
.cp-text, .cp-name { flex: 1 1 auto; min-width: 0; width: 100%; font-family: var(--matrix-font-mono); }
.cp-hint, .cp-error, .cp-note { margin: 0; font-size: var(--matrix-type-caption); }
.cp-note { color: var(--matrix-warning); }

.cp-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--matrix-space-12); align-items: end; }
.cp-controls .option-group { min-width: 0; }
.cp-result { display: grid; gap: var(--matrix-space-12); }
.cp-result h3 { margin-bottom: 0; }
.cp-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--matrix-space-8); }
.cp-swatches--wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cp-swatch { display: grid; grid-template-rows: auto auto auto; gap: var(--matrix-space-4); padding: var(--matrix-space-8); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); min-width: 0; }
.cp-swatch.is-base { border-color: var(--matrix-brand); box-shadow: 0 0 0 1px var(--matrix-brand); }
.cp-swatch-color { display: grid; place-items: end start; height: 64px; border-radius: 8px; border: 1px solid var(--matrix-border); padding: 6px 8px; }
.cp-swatch-aa { font-weight: 600; font-size: 1.125rem; }
.cp-swatch-meta { display: grid; gap: 2px; font-size: var(--matrix-type-caption); min-width: 0; }
.cp-swatch-label { font-weight: 600; }
.cp-swatch-hex { font-family: var(--matrix-font-mono); font-size: var(--matrix-type-table); }
.cp-copy { min-height: 32px; padding: 4px 10px; font-size: var(--matrix-type-caption); justify-self: start; }

.cp-code { display: grid; gap: var(--matrix-space-8); }
.cp-export { font-family: var(--matrix-font-mono); font-size: var(--matrix-type-code); min-height: 0; resize: vertical; white-space: pre; overflow: auto; }
.cp-code-actions { display: flex; flex-wrap: wrap; gap: var(--matrix-space-12); }

@media (max-width: 640px) {
  .cp-fields, .cp-controls { grid-template-columns: minmax(0, 1fr); }
  .cp-controls .matrix-secondary { justify-self: start; }
  .cp-swatches, .cp-swatches--wide { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* A colour the field cannot read: the picker no longer shows the last good one as if it were current (Jack's point 18b). */
.cp-picker.is-invalid { opacity: 0.35; outline: 2px solid var(--matrix-danger); outline-offset: 1px; }