/* ═══════════════════════════════════════════════════════════════════════════
   Mocca — the colour input (B65 W2, 065-072). See color-input.js.
   Field: swatch + the value in plain UI type (small muted labels, tabular
   figures) + the format tag. Popover: fixed, never leaves the viewport.
   ═══════════════════════════════════════════════════════════════════════════ */
.mci{
  display:inline-flex;align-items:center;gap:8px;min-width:0;width:100%;max-width:100%;
  height:40px;padding:0 10px 0 6px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg-input,var(--bg-1));color:var(--fg-1);cursor:pointer;text-align:start;
  font:600 13.5px var(--mk-font-ui);box-sizing:border-box;
  transition:border-color var(--mk-t-fast,.12s),box-shadow var(--mk-t-fast,.12s);
}
.mci:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.mci:focus-visible,.mci[aria-expanded="true"]{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.mci-sw{
  position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:7px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--fg-1) 14%,transparent);
  background:repeating-conic-gradient(#d9dde2 0 25%,#fff 0 50%) 0 0/8px 8px;
}
.mci-sw i{position:absolute;inset:0}
.mci.is-none .mci-sw i{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--mk-danger) calc(50% - 1px),var(--mk-danger) calc(50% + 1px),transparent calc(50% + 1px)) !important}
.mci-val{flex:1;min-width:0;display:flex;gap:10px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums;letter-spacing:0}
.mci-val em,.mci-loupe em{font-style:normal;color:var(--fg-3);font-weight:600;margin-inline-end:3px}
.mci-none{color:var(--fg-3)}
.mci-fmt{flex:0 0 auto;font:700 10.5px var(--mk-font-ui);color:var(--fg-3);letter-spacing:.06em}
.mci.mci-compact{width:auto;height:32px;padding:0 8px 0 4px;gap:6px;font-size:12.5px}
.mci.mci-compact .mci-sw{width:22px;height:22px;border-radius:6px}
.mci.mci-compact .mci-fmt{display:none}
.mci-native{display:none !important}

.mci-pop{
  position:fixed;z-index:12000;width:284px;max-width:calc(100vw - 16px);overflow:auto;overscroll-behavior:contain;
  padding:12px;box-sizing:border-box;background:var(--bg-1);color:var(--fg-1);
  border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 50px -20px rgba(0,0,0,.45),0 2px 8px -4px rgba(0,0,0,.18);
  display:none;flex-direction:column;gap:10px;font:500 13px var(--mk-font-ui);
}
.mci-pop.open{display:flex}
.mci-sv{
  position:relative;flex:0 0 auto;height:150px;border-radius:10px;cursor:crosshair;touch-action:none;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(calc(var(--h,0) * 1deg) 100% 50%));
}
.mci-sv i{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.mci-rail{position:relative;flex:0 0 auto;height:14px;border-radius:999px;cursor:pointer;touch-action:none;margin:0 7px}
.mci-rail[hidden]{display:none}
.mci-hue{background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red)}
[dir="rtl"] .mci-hue{background:linear-gradient(-90deg,red,#ff0,lime,cyan,blue,#f0f,red)}
.mci-alp{background:repeating-conic-gradient(#d9dde2 0 25%,#fff 0 50%) 0 0/10px 10px}
.mci-alp b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--c0,#000))}
[dir="rtl"] .mci-alp b{background:linear-gradient(-90deg,transparent,var(--c0,#000))}
.mci-rail i{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.25);box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translate(-50%,-50%);pointer-events:none}
.mci-sv:focus-visible,.mci-rail:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mci-top{display:flex;align-items:center;gap:6px}
.mci-seg{flex:1;display:flex;padding:3px;border-radius:10px;background:var(--bg-2);gap:2px}
.mci-seg button{flex:1;height:28px;border:0;border-radius:8px;background:none;color:var(--fg-2);font:600 12.5px var(--mk-font-ui);cursor:pointer}
.mci-seg button.on{background:var(--bg-1);color:var(--fg-1);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mci-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);display:grid;place-items:center;cursor:pointer;padding:0}
.mci-ic[hidden]{display:none}
.mci-ic:hover{background:var(--bg-2)}
.mci-ic .mi{font-size:18px}
.mci-vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mci-vals.no-a{grid-template-columns:repeat(3,minmax(0,1fr))}
.mci-vals.is-hex{grid-template-columns:3fr 1fr}
.mci-vals.is-hex.no-a{grid-template-columns:1fr}
.mci-vals label{display:flex;flex-direction:column;gap:3px;min-width:0}
.mci-vals label > span:first-child{font:600 10.5px var(--mk-font-ui);color:var(--fg-3);text-align:center;letter-spacing:.04em}
.mci-in{display:flex;align-items:center;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input,var(--bg-1));padding:0 6px;min-width:0}
.mci-in:focus-within{border-color:var(--accent)}
.mci-in input{flex:1;min-width:0;width:100%;border:0;background:none;outline:none;text-align:center;color:var(--fg-1);font:600 13px var(--mk-font-ui);font-variant-numeric:tabular-nums;padding:0}
.mci-vals.is-hex label:first-child .mci-in input{text-transform:uppercase;letter-spacing:.04em}
.mci-in i{font-style:normal;color:var(--fg-3);font:600 11px var(--mk-font-ui)}
.mci-sws{display:flex;flex-wrap:wrap;gap:6px}
.mci-sws:empty{display:none}
.mci-sws button{width:24px;height:24px;border-radius:6px;padding:0;cursor:pointer;border:1px solid color-mix(in srgb,var(--fg-1) 14%,transparent);
  background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#d9dde2 0 25%,#fff 0 50%) 0 0/8px 8px}
.mci-sws button.on{box-shadow:0 0 0 2px var(--bg-1),0 0 0 4px var(--accent)}

html.mci-dropping,html.mci-dropping *{cursor:crosshair !important}
.mci-loupe{position:fixed;z-index:12001;pointer-events:none;display:none;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;background:var(--bg-1);color:var(--fg-1);border:1px solid var(--border);box-shadow:0 12px 30px -12px rgba(0,0,0,.5);font:600 12px var(--mk-font-ui);font-variant-numeric:tabular-nums}
.mci-loupe.on{display:flex}
.mci-loupe i{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.15)}
.mci-lv{display:flex;gap:8px}