/* Scoped styles for the React/Ark UI island; the rest of the static site is untouched. */
.hhi-colour-picker { width: 100%; max-width: 420px; color: #2b2740; }
.picker-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.picker-content { display: flex; flex-direction: column; gap: 14px; }
.picker-area { position: relative; width: 100%; height: 180px; border-radius: 10px; touch-action: none; }
.picker-area-background { width: 100%; height: 100%; border-radius: inherit; }
.picker-area-thumb, .picker-hue-thumb { width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #332483, 0 2px 5px #0004; }
.picker-area-thumb { position: absolute; }
.picker-hue-row { display: flex; align-items: flex-end; gap: 16px; }
.picker-hue-field { flex: 1; min-width: 0; }
.picker-hue { position: relative; height: 44px; display: flex; align-items: center; touch-action: none; }
.picker-hue-track { width: 100%; height: 12px; border-radius: 8px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.picker-hue-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.picker-eyedropper { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid #b6b0c7; background: white; color: #332483; border-radius: 8px; cursor: pointer; }
.picker-value-row { display: flex; gap: 20px; align-items: flex-end; }
.picker-hex-label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; }
.hhi-colour-picker #custom-colour-hex { width: 145px; height: 48px; box-sizing: border-box; border: 1px solid #b6b0c7; border-radius: 6px; padding: 8px 12px; font: 16px ui-monospace, monospace; background: #fff; color: #2b2740; }
.picker-selected { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 12px; color: #6b6780; }
.picker-value-swatch { display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #b6b0c7; flex: none; }
.custom-colour .picker-error { margin: 0; min-height: 20px; font-size: 13px; color: #a32432; }
.hhi-colour-picker :focus-visible { outline: 3px solid #332483; outline-offset: 4px; }
#native-colour-fallback[hidden] { display: none; }
@media (max-width: 420px) { .picker-value-row { gap: 12px; } .picker-selected span { display: none; } .picker-area { height: 160px; } }