.text-color-picker{position:relative;--tcp-color:#fff;--tcp-hue:0;--tcp-x:0%;--tcp-y:0%}
.tcp-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:7px!important}.tcp-icon{display:block;width:14px;height:14px;flex:none;border:0;border-radius:50%;background:var(--tcp-color)}
.tcp-toggle .tcp-icon{box-shadow:inset 0 0 0 1px var(--tcp-border,#25372b80),0 0 0 1px #25372b12}
.tcp-chevron{display:block;width:16px;height:16px;flex:0 0 16px;align-self:center;pointer-events:none;transition:transform .15s ease}
.tcp-toggle[aria-expanded="true"] .tcp-chevron{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.tcp-chevron{transition:none}}
.tcp-panel{position:fixed;top:0;left:0;z-index:2;width:244px;max-height:calc(100dvh - 24px);overflow:auto;padding:14px;border:1px solid #dededb;border-radius:14px;background:#fff;color:#202822;box-shadow:0 16px 48px #152c2333;font:500 12px/1.4 Archivo,Arial,sans-serif;text-transform:none;letter-spacing:0}
.tcp-panel[hidden]{display:none!important}.tcp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.tcp-head strong{font-size:13px}.tcp-close{border:0;background:transparent;color:#66736b;font:400 23px/1 Arial;cursor:pointer;padding:2px 5px}
.tcp-spectrum{position:relative;height:148px;border-radius:8px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--tcp-hue) 100% 50%);touch-action:none;cursor:crosshair;outline-offset:3px}
.tcp-point{position:absolute;left:var(--tcp-x);top:var(--tcp-y);width:13px;height:13px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0005;pointer-events:none}
.tcp-hue-label{display:block;margin:15px 0}.tcp-hue{appearance:none;display:block;width:100%;height:12px;padding:0;border:0;border-radius:20px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer}
.tcp-hue::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border:2px solid white;border-radius:50%;background:hsl(var(--tcp-hue) 100% 50%);box-shadow:0 0 0 1px #0004}.tcp-hue::-moz-range-thumb{width:13px;height:13px;border:2px solid white;border-radius:50%;background:hsl(var(--tcp-hue) 100% 50%);box-shadow:0 0 0 1px #0004}
.tcp-fields{display:flex;gap:10px;align-items:center}.tcp-preview{width:38px;height:38px;flex:none;border:1px solid #0002;border-radius:8px;background:var(--tcp-color)}.tcp-fields label{display:flex;align-items:center;gap:9px;flex:1;border:1px solid #dededb;border-radius:8px;padding:0 9px;color:#6b736e}.tcp-hex{min-width:0;width:100%;height:36px;border:0;background:transparent;outline:0;font:600 12px Archivo,Arial,sans-serif;color:#202822}.tcp-hex[aria-invalid="true"]{color:#bd3535}.tcp-fields label:focus-within{outline:2px solid var(--site-accent,#0757c9);outline-offset:1px}
.tcp-reset{width:100%;margin-top:12px;padding:9px;border:0;border-radius:7px;background:#f1f4f0;color:#354a3d;font:600 11px Archivo,Arial,sans-serif;cursor:pointer}.tcp-reset:hover{background:#e5ebe3}.tcp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* The picker can extend beyond the narrow mobile formatting bar. */
.rich-text-toolbar:has(.tcp-panel:not([hidden])){overflow:visible}
.tcp-label{flex:none;white-space:nowrap;line-height:1.2}
.cs-accent-control .tcp-toggle,.cs-section-color-control .tcp-toggle{width:auto;min-width:max-content;min-height:36px;padding:8px 12px;font:600 12px Archivo,Arial,sans-serif;gap:8px!important;white-space:nowrap}
.cs-accent-control .tcp-icon,.cs-section-color-control .tcp-icon{width:16px;height:16px}
@media(max-width:760px){.tcp-hex{font-size:16px}}