/* Inline custom annotation color controls. */
.annotation-colors{gap:6px;min-height:32px}
.annotation-colors button[data-color]{width:22px;height:22px;min-width:22px;flex:none;box-shadow:none}
.annotation-colors button[data-color]:hover{background:var(--note-color);border-color:#fff;box-shadow:0 0 0 2px #00000012}
.annotation-colors .annotation-custom-color{display:inline-block;position:relative;flex:none;width:30px;height:30px;min-width:30px;min-height:30px!important;padding:0;border:1px solid #dedede;border-radius:50%;background:#fff;outline:none;color:#555;margin-left:auto}
.annotation-custom-color:before{content:"";position:absolute;left:calc(50% - 3px);top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #0002;background:var(--picker-color,#777);pointer-events:none}
.annotation-custom-color:after{content:"";position:absolute;left:calc(50% + 7px);top:calc(50% - 1px);width:4px;height:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-50%,-50%) rotate(45deg);transition:transform .15s ease;pointer-events:none}
.annotation-custom-color[aria-expanded=true]:after{transform:translate(-50%,0) rotate(225deg)}
.annotation-colors .annotation-custom-color[aria-expanded=true]{background:#f1f1f1;border-color:#aaa}
.annotation-colors .annotation-custom-color[aria-invalid=true]{border-color:#bd3b3b;box-shadow:0 0 0 2px #bd3b3b12}
.annotation-colors .annotation-custom-color:focus-visible{outline:2px solid #666;outline-offset:3px}
.color-picker{padding:12px;margin-top:11px;border:1px solid #e4e4e4;border-radius:12px;background:#fafafa}
.color-custom-header{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.color-preview{display:block;width:34px;height:34px;flex:none;border:1px solid #0002;border-radius:10px;background:var(--picker-color)}
.color-hex-label{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-size:10px;color:#777;font-weight:500}
/* Override the former 24px native color-input rule while fitting the row. */
.color-picker #annotation-color.color-hex{flex:1;width:0;min-width:0;max-width:100%;height:34px;padding:6px 9px;margin:0;border:1px solid #ddd;border-radius:9px;background:#fff;cursor:text;font:13px ui-monospace,Consolas,monospace;color:#111;box-shadow:none}
.color-picker #annotation-color.color-hex:focus{border-color:#999;outline:none;box-shadow:0 0 0 3px #11111109}
.color-picker #annotation-color.color-hex[aria-invalid=true]{border-color:#bd3b3b;box-shadow:0 0 0 2px #bd3b3b12}
.color-picker-error,.annotation-form-error{font-size:11px;line-height:1.5;color:#b52b2b;margin:6px 0 9px}
.color-slider-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;line-height:1.4;color:#666;margin-top:9px}
.color-slider-label output{font:10px ui-monospace,Consolas,monospace;color:#888}
.color-picker .color-slider{appearance:none;-webkit-appearance:none;width:100%;height:24px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;touch-action:pan-y}
.color-slider::-webkit-slider-runnable-track{height:6px;border-radius:8px;background:var(--channel-track)}
.color-slider::-moz-range-track{height:6px;border-radius:8px;background:var(--channel-track)}
.color-slider[data-color-channel=h]{--channel-track:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.color-slider[data-color-channel=s]{--channel-track:var(--saturation-track)}
.color-slider[data-color-channel=l]{--channel-track:var(--lightness-track)}
.color-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:-4.5px;border:2px solid #fff;border-radius:50%;background:#444;box-shadow:0 0 0 1px #aaa,0 1px 4px #0002}
.color-slider::-moz-range-thumb{width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#444;box-shadow:0 0 0 1px #aaa,0 1px 4px #0002}
#annotation-input[aria-invalid=true]{border-color:#bd3b3b!important}
.score-popover[data-kind=annotation-edit] #annotation-form{max-height:calc(var(--visible-height,100dvh) - 64px);overflow:auto;padding:1px}
@media(pointer:coarse){.color-picker .color-slider{height:30px}.color-slider::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px}.color-picker #annotation-color.color-hex{font-size:16px;height:38px}}
@media(prefers-reduced-motion:reduce){.annotation-custom-color:after{transition:none}}