/* @mostly-tiny/colorpicker — kit styles. Reads Forge design-system custom properties when present,
   with fallbacks so it looks right in any host. */

/* the trigger swatch (apply .mc-swatch, or let MostlyColor.create add it) */
.mc-swatch {
  --mc-color: #000;
  width: 26px; height: 26px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12)); border-radius: 7px;
  background:
    linear-gradient(var(--mc-color), var(--mc-color)),
    /* checkerboard so transparency/edges read */
    conic-gradient(#0001 25%, #0000 0 50%, #0001 0 75%, #0000 0) 0 0 / 10px 10px;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform .08s, box-shadow .12s;
}
.mc-swatch:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 3px var(--accent-bg-soft, rgba(91, 141, 239, 0.14)); }
.mc-swatch:active { transform: scale(0.95); }
.mc-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg-soft, rgba(91, 141, 239, 0.22)); }

/* the popover */
.mc-pop {
  position: fixed; z-index: 9999; display: none; width: 216px; padding: 12px;
  background: var(--bg-elev, #fff); color: var(--fg, #1d1d1f);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08)); border-radius: 14px;
  box-shadow: 0 10px 36px rgba(10, 10, 26, 0.18); font: 13px/1.4 var(--font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.mc-pop.is-open { display: block; }

.mc-sv {
  position: relative; width: 192px; height: 132px; border-radius: 8px; cursor: crosshair;
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
}
.mc-sv-thumb, .mc-hue-thumb {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%); pointer-events: none;
}
.mc-hue {
  position: relative; width: 192px; height: 12px; margin-top: 12px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.mc-hue-thumb { top: 50%; width: 16px; height: 16px; }

.mc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mc-preview { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--border, rgba(0, 0, 0, 0.1)); }
.mc-hex {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px; text-transform: lowercase;
  font: 500 12.5px var(--font-mono, ui-monospace, Menlo, monospace);
  color: var(--fg, #1d1d1f); background: var(--bg-input, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12)); border-radius: 8px; outline: none;
}
.mc-hex:focus { border-color: var(--accent, #5b8def); box-shadow: 0 0 0 3px var(--accent-bg-soft, rgba(91, 141, 239, 0.18)); }