/* color-converter: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.color-pick { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.color-pick input[type="color"] { height: 96px; padding: 6px; }
.color-swatch { height: 110px; border-radius: 12px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.copy-value {
    font: 600 1rem var(--mono); color: #fff; background: none; border: 0; padding: 2px 6px; margin-right: -6px;
    border-radius: 6px; cursor: copy;
}
.copy-value:hover { background: rgb(255 255 255 / 0.1); }
.color-extras { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.color-extras .small-heading:not(:first-child) { margin-top: 12px; }
.color-scale { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.color-scale button {
    height: 64px; border: 0; border-radius: 10px; cursor: copy; padding: 6px 4px;
    display: flex; align-items: flex-end; justify-content: center; font: 500 0.7rem var(--mono);
    box-shadow: inset 0 0 0 1px rgb(15 29 58 / 0.08);
}
@media (max-width: 640px) { .color-scale { grid-template-columns: repeat(3, 1fr); } }
.contrast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.contrast-sample { border-radius: 12px; padding: 16px; box-shadow: inset 0 0 0 1px rgb(15 29 58 / 0.1); }
.contrast-sample span { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; }
.contrast-sample p { margin: 6px 0 2px; font-size: 0.9rem; }
.contrast-sample strong { font-size: 0.9rem; }