/* Native color controls must not inherit text-input padding: it collapses the swatch. */
input[type="color"]{box-sizing:border-box;min-height:44px;height:44px;padding:4px;cursor:pointer;color-scheme:light}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:1px solid #b5cfdf;border-radius:5px}
input[type="color"]::-moz-color-swatch{border:1px solid #b5cfdf;border-radius:5px}
.color-field{display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px;border:1px solid #cfe3ef;border-radius:12px;background:#fff}
.color-field-label{font-size:12px;font-weight:700;color:#163d59}
.color-field-controls{display:flex;align-items:stretch;gap:10px;min-width:0}
.color-field input.color-field-swatch{display:block!important;flex:0 0 58px;width:58px!important;height:44px!important;min-height:44px;padding:4px!important;border:1px solid #b5cfdf;border-radius:9px;background:#fff;cursor:pointer;box-shadow:0 2px 4px #163d5912}
.color-field-swatch::-webkit-color-swatch-wrapper{padding:0}
.color-field-swatch::-webkit-color-swatch{border:0;border-radius:5px}
.color-field-swatch::-moz-color-swatch{border:0;border-radius:5px}
.color-field .color-field-hex{display:flex;flex-direction:row;align-items:center;gap:6px;flex:1;min-width:0;height:44px;padding:0 10px;border:1px solid #cfe3ef;border-radius:9px;background:#f5fbff}
.color-field-hex>span{font:700 9px/1.2 system-ui,sans-serif;letter-spacing:.05em;color:#607d92}
.color-field .color-field-hex input{flex:1;min-width:0;width:100%;height:40px;padding:0!important;border:0!important;border-radius:0;background:transparent;box-shadow:none!important;font:600 13px/1.4 ui-monospace,Consolas,monospace;color:#163d59;text-transform:uppercase}
.color-field-hex:focus-within{outline:2px solid #0875bb;outline-offset:2px}
.color-field-palette{display:flex;flex-wrap:wrap;gap:7px}
.color-field-palette button{display:grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;padding:3px!important;border:1px solid #bad1e0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:none}
.color-field-palette button span{display:block;width:100%;height:100%;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #163d5915;pointer-events:none}
.color-field-palette button[aria-pressed="true"]{border-color:#0875bb;outline:2px solid #0875bb;outline-offset:1px}
.color-field-palette button:focus-visible,.color-field-swatch:focus-visible{outline:2px solid #0875bb;outline-offset:3px}
.color-field-error{color:#a32323;font-size:11px;line-height:1.4}
.color-field-error:empty{display:none}
@media(pointer:coarse){.color-field-palette{gap:6px}.color-field-palette button{width:44px;height:44px;min-width:44px;min-height:44px}}