/* Ekomejl colour picker (assets/ui/color-picker.js). Two skins on one set of --ecp-* tokens:
   .ecp--tools  the tools layout tokens (light / dark follow assets/layout/layout.css)
   .ecp--retro  the Games Hub tokens (night / day / contrast follow games/assets/hub/hub-base.css)
   Fallback values keep it readable on a page that defines neither. Phones (<= 600px) get a bottom sheet.
   Entrances move only (never fade from 0), and stop under reduced motion. */

.ecp-layer { position: fixed; inset: 0; z-index: 10050; pointer-events: none; }
.ecp-layer[hidden] { display: none; }
.ecp-scrim { position: absolute; inset: 0; display: none; pointer-events: auto; background: rgba(0, 0, 0, .42); }
.ecp-layer.ecp-sheet .ecp-scrim { display: block; }

.ecp {
    --ecp-bg: var(--bg, #ffffff); --ecp-sub: var(--sub, #fafafa); --ecp-ink: var(--ink, #171717); --ecp-dim: var(--dim, #666666);
    --ecp-line: var(--line2, #dedede); --ecp-accent: var(--accent, #0a6cf0); --ecp-accent-bg: var(--accent-bg, #ebf3ff);
    --ecp-pri: var(--pri, #171717); --ecp-pri-ink: var(--pri-ink, #ffffff); --ecp-bad: var(--bad, #cd2b31);
    --ecp-font: var(--f-sans, "Geist", "Inter", "Segoe UI", system-ui, sans-serif); --ecp-mono: var(--f-mono, ui-monospace, Consolas, monospace);
    --ecp-radius: 10px; --ecp-ctl-radius: 6px; --ecp-shadow: var(--shadow, 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .16));
    --ecp-wheel: 156px;
    position: fixed; left: 8px; top: 8px; pointer-events: auto;
    width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; overscroll-behavior: contain;
    box-sizing: border-box; padding: 12px; display: grid; gap: 10px;
    background: var(--ecp-bg); color: var(--ecp-ink); border: 1px solid var(--ecp-line); border-radius: var(--ecp-radius);
    box-shadow: var(--ecp-shadow); font: 13px/1.35 var(--ecp-font); text-align: left; letter-spacing: normal; text-transform: none;
}
.ecp *, .ecp *::before, .ecp *::after { box-sizing: border-box; }
.ecp--retro {
    --ecp-bg: var(--surface, #221552); --ecp-sub: var(--bg-2, #1c1045); --ecp-ink: var(--text, #fff8ea); --ecp-dim: var(--muted, #d4cbf6);
    --ecp-line: var(--line-2, rgba(205, 185, 255, .34)); --ecp-accent: var(--cyan, #2ee6d6); --ecp-accent-bg: rgba(46, 230, 214, .16);
    --ecp-pri: var(--gold, #ffd23f); --ecp-pri-ink: var(--on-gold, #2a1400); --ecp-bad: var(--red, #ff7676);
    --ecp-font: var(--font-body, 'Nunito', system-ui, sans-serif); --ecp-radius: 16px; --ecp-ctl-radius: 10px;
    --ecp-shadow: var(--shadow, 0 18px 40px rgba(5, 0, 25, .5));
    border-width: 2px; border-color: var(--btn-edge, var(--ecp-line)); padding-top: 16px; font-size: 14px;
    background-image: linear-gradient(90deg, var(--teal, #2ee6d6) 0 25%, var(--magenta, #ff4fb8) 25% 50%, var(--sun, #ffd23f) 50% 75%, var(--grape, #8a4dff) 75%);
    background-size: 100% 5px; background-repeat: no-repeat; background-position: top;
}

.ecp-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ecp-title { flex: 1; font-weight: 600; font-size: 13.5px; }
.ecp--retro .ecp-title { font-family: var(--font-display, var(--ecp-font)); font-weight: 400; font-size: 15px; letter-spacing: .03em; color: var(--title, var(--ecp-pri)); }

.ecp button { font: inherit; color: inherit; margin: 0; cursor: pointer; }
.ecp-icon, .ecp-btn, .ecp-copy {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 10px;
    background: var(--ecp-sub); color: var(--ecp-ink); border: 1px solid var(--ecp-line); border-radius: var(--ecp-ctl-radius); white-space: nowrap;
}
.ecp-icon { width: 30px; padding: 0; }
.ecp-icon[hidden] { display: none; }
.ecp-icon:hover, .ecp-btn:hover, .ecp-copy:hover { border-color: var(--ecp-accent); }
.ecp .ecp-pri { background: var(--ecp-pri); color: var(--ecp-pri-ink); border-color: var(--ecp-pri); font-weight: 600; }
.ecp--retro .ecp-btn, .ecp--retro .ecp-copy, .ecp--retro .ecp-icon { border-width: 2px; border-color: var(--btn-edge, var(--ecp-line)); font-weight: 700; box-shadow: 0 3px 0 var(--btn-edge, rgba(0, 0, 0, .4)); }
.ecp--retro .ecp-btn.ecp-pri { background: linear-gradient(var(--btn-hi, #ffe680), var(--gold, #ffd23f) 55%, var(--gold-2, #ffa21b)); color: var(--on-gold, #2a1400); }
.ecp--retro .ecp-btn:active, .ecp--retro .ecp-copy:active, .ecp--retro .ecp-icon:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge, rgba(0, 0, 0, .4)); }
.ecp :focus-visible { outline: 2px solid var(--ecp-accent); outline-offset: 2px; }

/* wheel: hue around, saturation outwards; the shade darkens it for brightness */
.ecp-top { display: grid; grid-template-columns: var(--ecp-wheel) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ecp-wheel {
    position: relative; width: var(--ecp-wheel); height: var(--ecp-wheel); border-radius: 50%; touch-action: none; user-select: none;
    cursor: var(--cur-crosshair, var(--gcur-crosshair, pointer));
    background: radial-gradient(circle closest-side, #fff, rgba(255, 255, 255, 0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.ecp-wheel-shade { position: absolute; inset: 0; border-radius: 50%; background: #000; opacity: 0; pointer-events: none; }
.ecp-thumb {
    position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
}
.ecp-wheel:focus-visible { outline-offset: 3px; }
.ecp-wheel.is-drag .ecp-thumb { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

.ecp-compare { display: grid; grid-template-rows: 1fr 1fr; border-radius: var(--ecp-ctl-radius); overflow: hidden; border: 1px solid var(--ecp-line); min-height: 96px; }
.ecp-old, .ecp-new {
    position: relative; display: flex; align-items: flex-end; padding: 6px 8px; font-size: 11.5px; font-weight: 600; border: 0; border-radius: 0; text-align: left;
    background: linear-gradient(var(--c, #000), var(--c, #000)), repeating-conic-gradient(#cfcfcf 0 25%, #fff 0 50%) 0 0 / 12px 12px;
}
.ecp-old span, .ecp-new span { padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; }

.ecp-slider {
    position: relative; height: 18px; border-radius: 9px; touch-action: none; user-select: none; cursor: pointer;
    background: linear-gradient(90deg, #000, var(--to, #fff)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.ecp-slider[hidden] { display: none; }
.ecp-alpha { background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--to, #000)), repeating-conic-gradient(#cfcfcf 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.ecp-knob {
    position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
    background: transparent; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .3);
}

.ecp input[type="text"], .ecp input[type="number"] {
    width: 100%; min-width: 0; height: 30px; margin: 0; padding: 0 8px; font: 12.5px/1 var(--ecp-mono); color: var(--ecp-ink);
    background: var(--ecp-sub); border: 1px solid var(--ecp-line); border-radius: var(--ecp-ctl-radius); box-shadow: none; appearance: textfield; -moz-appearance: textfield;
}
.ecp input[type="number"]::-webkit-inner-spin-button, .ecp input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ecp input:focus { outline: 2px solid var(--ecp-accent); outline-offset: 0; border-color: var(--ecp-accent); }
.ecp-smart { display: grid; gap: 4px; font-size: 12px; color: var(--ecp-dim); }
.ecp-smart input[type="text"] { font-family: var(--ecp-font); font-size: 13px; }
.ecp-err { margin: -6px 0 0; min-height: 0; font-size: 12px; color: var(--ecp-bad); }
.ecp-err:empty { display: none; }

.ecp-rows { display: grid; gap: 6px; }
.ecp-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.ecp-lab { font: 600 11px/1 var(--ecp-mono); color: var(--ecp-dim); letter-spacing: .04em; }
.ecp-nums { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.ecp-copy { min-width: 74px; font-size: 12px; }
.ecp-str { grid-column: 2 / 4; font: 11.5px/1.2 var(--ecp-mono); color: var(--ecp-dim); user-select: all; overflow-wrap: anywhere; }

.ecp-swatches { display: grid; gap: 4px; }
.ecp-swatches[hidden] { display: none; }
.ecp-setlab { font-size: 11.5px; color: var(--ecp-dim); }
.ecp-swrow { display: flex; flex-wrap: wrap; gap: 5px; }
.ecp .ecp-sw {
    width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--ecp-line);
    background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#cfcfcf 0 25%, #fff 0 50%) 0 0 / 8px 8px;
}
.ecp .ecp-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ecp-bg), 0 0 0 4px var(--ecp-accent); }

.ecp-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding-top: 2px; }
.ecp-toast { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ecp-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecp-toast.is-on::before { content: "\2713\00a0"; }
.ecp-clip { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* phones: a bottom sheet over a scrim */
.ecp-layer.ecp-sheet .ecp {
    --ecp-wheel: 172px;
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: 90vh; max-height: 90dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.ecp-layer.ecp-sheet .ecp-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ecp-line); }
.ecp-layer.ecp-sheet .ecp-btn { min-height: 40px; padding: 0 16px; }
.ecp-layer.ecp-sheet .ecp input[type="text"], .ecp-layer.ecp-sheet .ecp input[type="number"] { height: 36px; font-size: 16px; }
.ecp-layer.ecp-sheet .ecp .ecp-sw { width: 30px; height: 30px; }

/* entrances: movement only */
@keyframes ecpPop { from { transform: translateY(-4px) scale(.985); } to { transform: none; } }
@keyframes ecpUp { from { transform: translateY(24px); } to { transform: none; } }
.ecp-layer.ecp-in .ecp { animation: ecpPop .14s cubic-bezier(0, 0, .2, 1); }
.ecp-layer.ecp-in.ecp-sheet .ecp { animation: ecpUp .2s cubic-bezier(0, 0, .2, 1); }
.ecp-layer.ecp-still .ecp { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ecp-layer .ecp { animation: none !important; } }