.color-picker__content {
    display: grid;
    gap: var(--tool-gap);
}

.color-picker__workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.color-picker__workspace > .tool-panel {
    min-width: 0;
}

.color-picker__selector,
.color-picker__preview,
.color-picker__palette,
.color-picker__variations {
    display: grid;
    gap: var(--tool-gap);
    grid-column: 1 / -1;
}

.color-picker__panel-header h2,
.color-picker__variation h3 {
    margin: 0;
    color: var(--color-heading);
}

.color-picker__panel-header h2 {
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
}

.color-picker__picker {
    display: grid;
    gap: 0.85rem;
}

.color-picker__matrix {
    position: relative;
    min-block-size: 16rem;
    max-block-size: 24rem;
    overflow: hidden;
    border: 1px solid var(--tool-border-strong);
    border-radius: var(--tool-control-radius);
    background: var(--color-surface-muted);
    isolation: isolate;
}

.color-picker__matrix-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

.color-picker__matrix-canvas:focus-visible {
    outline: 2px solid var(--tool-border-strong);
    outline-offset: -4px;
}

.color-picker__matrix-cursor {
    position: absolute;
    z-index: 1;
    inline-size: 1.3rem;
    block-size: 1.3rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 45%);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.color-picker__hue-row {
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
}

.color-picker__hue-input {
    width: 100%;
    height: 1.15rem;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    cursor: pointer;
}

.color-picker__hue-input::-webkit-slider-thumb {
    width: 1.25rem;
    height: 1.25rem;
    appearance: none;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 1px var(--tool-border-strong);
}

.color-picker__hue-input::-moz-range-thumb {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 1px var(--tool-border-strong);
}

.color-picker__hue-input:focus,
.color-picker__hue-input:focus-visible {
    border-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--tool-border-strong);
    outline-offset: 3px;
}

.color-picker__control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--tool-gap);
}

.color-picker__hex-field {
    min-width: 0;
}

.color-picker__hex-field .input-action-group {
    min-height: var(--tool-control-height);
    gap: 0.55rem;
}

.color-picker__hex-field .input-action-group > :is(.tool-control, .btn),
.color-picker__actions .btn {
    block-size: var(--tool-control-height);
    min-block-size: var(--tool-control-height);
}

.color-picker__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
    min-height: var(--tool-control-height);
    gap: 0.55rem;
}

.color-picker__actions .btn {
    width: auto;
}

@media (min-width: 48.0625rem) {
    @supports (grid-template-rows: subgrid) {
        .color-picker__control-row {
            grid-template-rows: auto var(--tool-control-height);
            align-items: stretch;
            column-gap: var(--tool-gap);
            row-gap: 0.4rem;
        }

        .color-picker__hex-field {
            display: grid;
            grid-row: span 2;
            grid-template-rows: subgrid;
        }

        .color-picker__hex-field > .tool-label {
            grid-row: 1;
        }

        .color-picker__hex-field > .input-action-group {
            grid-row: 2;
            min-height: 0;
        }

        .color-picker__actions {
            grid-column: 2;
            grid-row: 2;
            align-self: stretch;
            min-height: 0;
        }
    }
}

.color-picker__preview {
    grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1fr);
    align-items: stretch;
}

.color-picker__preview-swatch {
    display: grid;
    min-block-size: 11rem;
    place-items: center;
    padding: 1rem;
    border: 1px solid var(--tool-border-strong);
    border-radius: var(--tool-control-radius);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.color-picker__preview-swatch span {
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    overflow-wrap: anywhere;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: clamp(1.1rem, 1rem + 0.8vw, 1.5rem);
    font-weight: 700;
}

.color-picker__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.color-picker__details > div {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--tool-control-radius);
    background: var(--color-surface-muted);
}

.color-picker__details dt {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.color-picker__details dd {
    margin: 0.25rem 0 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
}

.color-picker__palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tool-gap);
}

.color-picker__harmony-control {
    width: min(100%, 17rem);
}

.color-picker__variation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tool-gap);
}

.color-picker__variation {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
}

.color-picker__variation h3 {
    font-size: 1rem;
}

.color-picker__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--tool-control-radius);
}

.color-picker__swatch {
    display: grid;
    min-width: 0;
    min-height: 5.5rem;
    place-items: end start;
    padding: 0.55rem;
    border: 0;
    border-inline-end: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: var(--swatch-color);
    color: var(--swatch-text-color);
    cursor: copy;
    text-align: start;
}

.color-picker__swatch:last-child {
    border-inline-end: 0;
}

.color-picker__swatch:hover {
    filter: brightness(0.95);
}

.color-picker__swatch:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

.color-picker__swatch-value {
    display: block;
    max-width: 100%;
    padding: 0.22rem 0.35rem;
    overflow-wrap: anywhere;
    border-radius: 0.2rem;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.75rem;
    font-weight: 700;
}

@media (max-width: 48rem) {
    .color-picker__workspace,
    .color-picker__variation-grid {
        grid-template-columns: 1fr;
    }

    .color-picker__matrix {
        min-block-size: 14rem;
        max-block-size: none;
    }

    .color-picker__control-row {
        grid-template-columns: 1fr;
    }

    .color-picker__actions {
        justify-content: flex-start;
    }

    .color-picker__preview {
        grid-template-columns: 1fr;
    }

    .color-picker__details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 34rem) {
    .color-picker__hue-row,
    .color-picker__control-row,
    .color-picker__details {
        grid-template-columns: 1fr;
    }

    .color-picker__actions .btn {
        flex: 1 1 10rem;
    }

    .color-picker__palette-header {
        align-items: stretch;
        flex-direction: column;
    }

    .color-picker__harmony-control {
        width: 100%;
    }

    .color-picker__swatches {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .color-picker__swatch {
        min-height: 4.75rem;
    }
}